функция никогда не вызывается getElementById(). AddEventListener()

Я пытаюсь переместить событие JavaScript триггеры на двух полях пароля (для предупреждения пользователя, если они не равны) внутри элементов формы кфункция никогда не вызывается getElementById(). AddEventListener()

document.getElementById('id_password1').addEventListener('keyUp', checkPass); 
document.getElementById('id_password2').addEventListener('keyUp', checkPass);

но функция никогда не срабатывает (если я изменю checkPass к checkPass() функция вызывается только загрузке страницы, но я не думаю, что это означает, что это время срабатывает слушателем). В консоли JavaScript нет ошибок. Если изменить идентификаторы на что-то поддельным, он дает эту ошибку:

Uncaught TypeError: Cannot read property 'addEventListener' of null

(я не достаточно знакомы с инспектором Chrome JavaScript, чтобы знать, если это может помочь мне в дальнейшем.)

Все работает правильно, если триггеры события находятся непосредственно в элементах формы.

Вот элементы формы:

<p>Password: <input id="id_password1" name="password1" type="password" /></p> 
<p>Password confirm: <input id="id_password2" name="password2" type="password" /></p>

Что мне не хватает?

<HTML><HEAD> 
    <TITLE>Create account</TITLE> 
</HEAD> 

<BODY> 
    <h1>Create account</h1> 

    <form id="user_form" method="post" action="/accounts/register/"> 

    <p>Username: <input id="id_username" maxlength="30" name="username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.</span></p> 
    <p>Password: <input id="id_password1" name="password1" type="password" /></p> 
    <p>Password confirm: <input id="id_password2" name="password2" type="password" /></p> 

    <span id="confirmMessage" class="confirmMessage"></span> 

    <input type="submit" name="submit" value="Register" /> 
    </form> 

<script language="JavaScript"> 
    function checkPass() { 
    var pass1 = document.getElementById('id_password1'); 
    var pass2 = document.getElementById('id_password2'); 
    alert("pass1=" + pass1.value + ", pass2=" + pass2.value); 

    //Check passwords here. Set confirmMessage if bad. 
    } 

    document.getElementById('id_password1').addEventListener('keyUp', checkPass); 
    document.getElementById('id_password2').addEventListener('keyUp', checkPass); 

</script> 

</BODY></HTML>

источник

2014-08-28 aliteralmind

Событие чувствительно к регистру. Попробуйте вместо этого «keyup» (все строчные буквы). Смотрите эту скрипку:

http://jsfiddle.net/LfamexLw/

function checkPass(){ 
    alert("keyup"); 
} 

function checkPass2(){ 
    alert("keyUp"); 
} 

document.getElementById('id_password1').addEventListener('keyup', checkPass); 
document.getElementById('id_password1').addEventListener('keyUp', checkPass2);

Вы заметите checkPass2 никогда не срабатывает.

источник

2014-08-28 19:19:50 aquinas

Вот оно! Помимо поиска списка возможных событий, это то, что я мог бы выяснить в отладчике JavaScript? Как видеть имена фактически вызванных событий? Я использую Chrome. – aliteralmind

(Это действительно вопрос «опечатки», но, похоже, он не кажется закрытым.) – aliteralmind

Я так не думаю. Причина в том, что вы можете, конечно, присоединить свои СОБСТВЕННЫЕ события. Таким образом, вы можете разумно прослушивать событие под названием «keyUp» или «keyUP» и т. Д. Если вы хотите, как я это понял, мое эмпирическое правило состоит в том, чтобы просто следовать этому шаблону отладки: 1) проверить и исправить ошибки скрипта, 2) предполагают, что волшебная строка как-то не так. В этом случае «onkeyup». – aquinas

Вот рабочий код, основанный на ответ @aquinas', включая полную функцию проверки, заместитель пароля:

<HTML><HEAD> 
    <TITLE>Create account</TITLE> 
</HEAD> 

<BODY> 
    <h1>Create account</h1> 

    <form id="user_form" method="post" action="/accounts/register/" 
      enctype="multipart/form-data"> 

     <p><label for="id_username">Username:</label> <input id="id_username" maxlength="30" name="username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.</span></p> 
     <p><label for="id_password1">Password:</label> <input id="id_password1" name="password1" type="password" /></p> 
     <p><label for="id_password2">Password confirmation:</label> <input id="id_password2" name="password2" type="password" /></p> 

     <!-- Where checkPass() writes its message --> 
     <span id="confirmMessage" class="confirmMessage"></span> 

     <P><input type="submit" name="submit" value="Register" /></P> 
    </form> 

<script language="JavaScript"> 
    /* 
     From (8/27/2014) 
     http://keithscode.com/tutorials/javascript/3-a-simple-javascript-password-validator.html 

     Added the "don't print anything if one or both fields are empty" block 
    */ 
    function checkPass() { 
     //Store the password field objects into variables ... 
     var pass1 = document.getElementById('id_password1'); 
     var pass2 = document.getElementById('id_password2'); 
     //Store the Confimation Message Object ... 
     var message = document.getElementById('confirmMessage'); 
     //Set the colors we will be using ... 
     var goodColor = "#66cc66"; 
     var badColor = "#ff6666"; 
     //Compare the values in the password field 
     //and the confirmation field 
     if(pass1.value.length === 0 || pass2.value.length === 0) { 
     pass2.style.backgroundColor = null; 
     message.style.color = null; 
     message.innerHTML = ""; 
     return; 
     } 

     if(pass1.value === pass2.value){ 
     //The passwords match. 
     //Set the color to the good color and inform 
     //the user that they have entered the correct password 
     pass2.style.backgroundColor = goodColor; 
     message.style.color = goodColor; 
     message.innerHTML = "Passwords Match!" 
     }else{ 
     //The passwords do not match. 
     //Set the color to the bad color and 
     //notify the user. 
     pass2.style.backgroundColor = badColor; 
     message.style.color = badColor; 
     message.innerHTML = "Passwords Do Not Match!" 
     } 
    } 
    document.getElementById('id_password1').addEventListener('keyup', checkPass); 
    document.getElementById('id_password2').addEventListener('keyup', checkPass); 
    document.getElementById("id_username").focus(); 
</script> 
</BODY></HTML>

enter image description here

источник

2014-08-28 19:43:28 aliteralmind

Улучшенная версия: http://aliteralmind.wordpress.com/2014/08/28/passwordconfirmjs/ – aliteralmind

функция никогда не вызывается getElementById(). AddEventListener()

ответ

Смежные вопросы