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.