検証フォーム。 addEventListenerがリッスンしない

OKユーザーがユーザー名フィールドにユーザー名を入力したかどうかを確認するフォームがあります。さらに、どのボタンをクリックしたのかを知りたいのですが、実際にはログアウトボタンがクリックされたときに見たいと思っています。フォームが送信されたときにaddEventListenerが 'クリック'値を登録していないようです。 buttonsとは、Firefoxデバッガで実行すると正しい値を持っています。だから私の質問は、どのように私はaddEventListenerの値をチェックするか、その渡されているか？私が間違っていることについてのいくつかの洞察を探しています。検証フォーム。 addEventListenerがリッスンしない

<!DOCTYPE html> 
<html> 
<head> 
    <title>Not empty</title> 
</head> 
<body> 
<script> 

function ValidateForm(frm){ 

     var buttons = document.getElementsByName('adam'); 
     var buttonsLength = buttons.length; 
     for (var i = 0; i < buttonsLength; i++){ 
      buttons[i].addEventListener('click', clickResponse, false); 
     }; 

     function clickResponse(){ 

     if(this.id == "logout"){ 
      alert(this.id); 
     }else { 
      alert("not logout:" + this.id); 
     }; 
    }; 
    if (!frm.UserName.value) { 
       alert("You must enter your username."); 
       frm.UserName.focus(); 
       return false; 
      } 
      return true;   
} 
</script> 
<form method="post" action="test.html" onsubmit="return ValidateForm(this)"> 
      <input type="input" name="UserName" value=""> 
      <input type="password" name="Password" value=""> 
    <button name="adam" id="login">login</button> 
    <button name="adam" id="sendMe">send me my password</button> 
    <button name="adam" id="logout">logout</button> 
<form> 
</body>

出典

2017-01-09 poohbear

あなたはJSのユーザー名に大文字がありますが、htmlではありません。もう1つの問題は、ボタンをクリックするたびに関数の新しいインスタンスを割り当てることです。 –

申し訳ありませんが、コピーして貼り付けることに失敗しました。 – poohbear

たぶん私は間違っているが、私はあなたが次のことをやろうと思う：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Not empty</title> 
    </head> 
    <body> 
    <form method="post" name="formname" action="test.html"> 
    <input type="input" id="username" name="userName" value=""> 
    <input type="password" id="password" name="Password" value=""> 
    <button type="button" name="adam" id="login">login</button> 
     <button type="button" name="adam" id="sendMe">send me my  password</button> 
     <button type="button" name="adam" id="logout">logout</button> 
    <form> 
    <script> 

    var buttons = document.getElementsByName('adam'); 
    var buttonsLength = buttons.length; 

    for(var i=0;i<buttonsLength; i++){ 
    buttons[i].addEventListener('click', clickResponse, false); 
    }; 

    function clickResponse(){ 
    var u, p; 
    u=document.getElementById('username'); 
    p=document.getElementById('password'); 
    switch(this.id) { 
     case 'logout': 
      alert('Logout '+this.id); 
      break; 
     case 'login': 
      if(u.value.length==0 || 
       p.value.length==0) { 
        alert("Please enter your unsername and password."); 
        if(u.length==0) { 
        u.focus(); 
        } else { 
        p.focus(); 
        } 
       } else { 
       alert('submit'); 
       //document.forms.formname.submit(); 
       } 
      break; 
     case 'sendMe': 
      if(u.value.length==0) { 
        alert("Please enter your username."); 
        u.focus(); 
        return false; 
       } else { 
       alert('submit'); 
       //document.forms.formname.submit(); 
       } 
      break; 
    } 
    }; 

    </script> 
    </body>

だから、あなたは前にリスナーを割り当てる必要がありますクリックすると、クリックチェックボタンのid（実行するコマンド）をキャプチャして、ボタンのクリックに応じてユーザとパスがフルフィルされているかどうかを確認したいと思いました私はあなたのコードを変更しましたが、あなたが探しているものだと思います。

出典

2017-01-09 20:09:28 ZeroWorks

クリックの前にリスナーを割り当てると、JSコードはボタンが作成された後でなければなりませんか？ – poohbear

あなたのコードでは 'onsubmit'イベントでリスナーを割り当てます。私はそれを変更し、イベントアサイメントを機能から外したので、DOMのボタンの後にスクリプトを移動する必要があります。たぶん私は理解を複雑にしましたが、うまくいくはずです – ZeroWorks

これは意味がありました、 – poohbear

あなたのコードは、あなたが必要とする正確に理解するために少し厄介で難しいです。

つまり、onclick属性を使用してボタンを3つの別々の機能にバインドする必要があります。

これらの機能の中で、ログイン/ログアウト/ sendMe機能を実行するために必要なdomノードを取得できます。そのよう

：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Not empty</title> 
 
</head> 
 
<body> 
 
    <script> 
 

 
    function login(){ 
 
     alert('login function'); 
 

 
     // do what you need to here to login 
 
     var username = document.getElementsByName('input-username').value; 
 
     var password = document.getElementsByName('input-password').value; 
 

 
     if (!username){ 
 
      alert("You must enter your username."); 
 
     }else if (!password){ 
 
      alert("You must enter your password."); 
 
     } 
 
    } 
 

 
    function sendMe(){ 
 
     alert('sendMe function'); 
 

 
     // sendMe functionality here 
 
    } 
 

 
    function logout(){ 
 
     alert('logout function'); 
 

 
     // logout functionality here 
 
    } 
 

 
    </script> 
 
    <form method="post" action="test.html"> 
 
     <input id='input-username' type="input" name="UserName" value="" /> 
 
     <input id='input-password' type="password" name="Password" value="" /> 
 

 
     <button id="login" onClick="login()">login</button> 
 
     <button id="sendMe" onClick="sendMe()">send me my password</button> 
 
     <button id="logout" onClick="logout()">logout</button> 
 
    <form> 
 
</body>

出典

2017-01-09 20:02:27

検証フォーム。 addEventListenerがリッスンしない

答えて

関連する問題