Trying to make a javascript account system on my page using javascript... but apparently I've overlooked something

StackOverflow https://stackoverflow.com/questions/20945000

Question

My html page seems like ignoring part of the script: when you have an account it doesn't hide the #signup div, and when you don't have one it doesn't hide the #account div: 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's 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>

What I think happened is that I didn't set the localStorage Object to be anything at first... but I have no idea how localStorage works other than it is an Object and in all samples of this Object I never found anyone declare the variable

If I've overlooked 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 outcome, but still doesn't work:

    $(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');
    }
});
})
Was it helpful?

Solution

I found it:

first, i suggest you to avoid inlined javascript events.

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

Your 'bug' was with the data-type from the input:text fields. Replace them for .val() instead of .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 here and a version with a 'clearStorage' button to play.

Just to mention:

  • you have to re-run the script on jsFiddle to see it applied.
  • you have javascript errors on your page (ReferenceError: barHeight is not defined Source : http://www.copot.eu/matei/assets/scripts.js Line : 33) witch blocks the rest of the scripting.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top