2014-01-06 1 views
4

Моя страница html кажется проигнорирующей часть скрипта: когда у вас есть учетная запись, она не скрывает div #signup, и когда вы не один он не скрывает #account DIV: здесь код JavaScript:Попытка сделать систему учетных записей javascript на моей странице с помощью javascript ... но, видимо, я упустил что-то

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'); 
    } 
} 

а вот HTML код:

<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> 

то, что я думаю, произошло то, что Я не установил объект localStorage, чтобы быть чем-то первым ... но я h не имеют никакой идеи, как localStorage работает, кроме это объект, и во всех образцах этого объекта я не нашел никого, объявить переменную

Если я упускать из виду что-то другое здесь есть ссылка на страницу: http://www.copot.eu/matei/account

| UPDATE |

после того, что вы сказали мне, что это должно быть результатом, но до сих пор не работает:

$(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'); 
    } 
}); 
}) 
+0

Оберните свой скрипт в 'document.ready'. –

+0

@Mathew Nope, по-прежнему не работает (веб-страница остается прежней ... но постучал скрипт в $ (document) .ready (function() {SCRIPT})) – towc

+0

@Milkywayspatterns запускает предупреждение: я проверил – towc

ответ

2

Я нашел его:

первого, я предлагаю вам, чтобы избежать встраиваемого JavaScript события.

Заменить строку: <input type='button' id="createNewAccount" value='Create Account' />

Ваш «ошибка» была с данными типа от ввода: текстовых полей. Замените их на .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 here и version with a 'clearStorage' button играть.

Просто говоря:

  • вы должны повторно запустить скрипт на jsFiddle, чтобы он применялся.
  • У вас есть ошибки на вашей странице (ReferenceError: barHeight не определен Источник: http://www.copot.eu/matei/assets/scripts.js Линия: 33) Ведьма блокирует остальную часть скриптов.
+0

, так что я должен изменить также идентификатор кнопки для созданияNewAccount справа? И не следует обернуть его в document.write ... позвольте мне попробовать ... И, кстати, localStorage является серверной или клиентской стороной? – towc

+0

извините ... не работает: я загрузил файл на веб-сайт: вы можете проверить себя! – towc

+0

Работает jsFiddle правильно. Посмотрите на левый столбец jsFiddle, сценарий взломан в DOMready. –