Trying to make javascript account system on my page using javascript ... but apparently I missed something

My html page seems to be ignoring the script part: if you have an account, it does not hide the div #signup, and when you do not have it, it does not hide the #accountdiv: here is the JavaScript code:

if(localStorage.hasAnAccount){
    $('#signup').hide();
    $('#AccountName').html(localStorage.accountName)
}else{
    $('#account').hide();
}
function createNewAccount(){
    localStorage.accountName=$('#newAccountName').html();
    localStorage.accountPassword=$('newAccountPassword').html();
    if(typeof localStorage.accountName=='string'&& typeof localStorage.accountPassword=='string'){
        alert('congrats! Your account has been made!');
        localStorage.hasAnAccount=true;
    }else{
        alert('check that your name and password are alphanumeric strings');
    }
}

And here is the HTML code:

<html>
    <head>
        <title>Account | Cicada3301 Website</title>
     <link rel='stylesheet' type='text/css' href='http://www.copot.eu/matei/assets/stylesheet.css'>
  <link rel='stylesheet' href='http://www.copot.eu/matei/assets/jquery-ui-stylesheet.css'>
  <script  type="text/javascript" src="http://www.copot.eu/matei/assets/jquery-1.10.2.min.js"></script>
  <script src="http://www.copot.eu/matei/assets/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.copot.eu/matei/assets/scripts.js"></script>
    <script type='text/javascript' src='http://www.copot.eu/matei/account/account-scripts.js'></script>
    <link rel='shortcut icon' type='image/x-icon' href='http://www.copot.eu/matei/assets/me.jpg'>
    </head>
    <body> 
        <div id='account'>
            <div id='AccountName'></div>
        </div>
        <div id='signup'>
            <p><input type='text' id='newAccountName'> Insert your account name</p>
            <p><input type='text' id='newAccountPassword'> Insert your account password</p>
            <p><input type='button' onclick='createNewAccount()' value='Create Account'></p>
        </div>
    </body>
</html>

I think I did not set the object localStoragefor something at first ... but I have no idea how it works localStorageexcept for Object and in all samples of this object I never found that anyone would declare a variable

If I missed something else, here is the link to the page: http://www.copot.eu/matei/account

| UPDATE |

after what you told me this should be the result, but still not working:

    $(document).ready(function(){
if (localStorage.hasAnAccount) {
    $('#signup').hide();
    $('#AccountName').html(localStorage.accountName)
} else {
    $('#account').hide();
}

$('#createNewAccount').click(

function () {
    if (typeof localStorage.accountName == 'string' && typeof localStorage.accountPassword == 'string') {
        localStorage.accountName = $('#newAccountName').val();
        localStorage.accountPassword = $('newAccountPassword').val();

        alert('congrats! Your account has been made!');
        localStorage.hasAnAccount = true;
    } else {
        alert('check that your name and password are alphanumeric strings');
    }
});
})
+4
1

:

-, javascript.

: <input type='button' id="createNewAccount" value='Create Account' />

"" : text. .val() .html()

if (localStorage.hasAnAccount) {
    $('#signup').hide();
    $('#AccountName').html(localStorage.accountName)
} else {
    $('#account').hide();
}


/* run your fonctionnality upon the id of your button */
$('#createNewAccount').click(

function () {
    /* replace .html() by .val() */
        localStorage.accountName = $('#newAccountName').val();
    /* replace .html() by .val() */
        localStorage.accountPassword = $('newAccountPassword').val();

    /* this next testing will not validate for alphanumeric */
    if (typeof localStorage.accountName == 'string' && typeof localStorage.accountPassword == 'string') {

        alert('congrats! Your account has been made!');
        localStorage.hasAnAccount = true;
    } else {
        alert('check that your name and password are alphanumeric strings');
    }
});

jsfiddled "clearStorage" .

:

+2

All Articles