document.getElementById（ 'l'）。value;は動作していません

Question

私はこれに似たサインアップフォームを持っていますhttp://codepen.io/ehermanson/pen/KwKWEv。 [サインアップ]タブは正常に機能しますが、ログインタブをクリックして電子メールとパスワードを入力すると、プログラムは電子メールの価値に目が見えないようです。 これは私が 警告（電子メール）を加え、私のHTMLコード

<div id="login"> 
     <h1>Welcome Back!</h1> 

     <div action="" method="post"> 


     <div class="field-wrap"> 
     <label> 
      Email Address<span class="req">*</span> 
     </label> 
     <input type="email"required autocomplete="off" id="email"/> 
     </div> 

     <div class="field-wrap"> 
     <label> 
      Enter your password<span class="req">*</span> 
     </label> 
     <input type="password"required autocomplete="off" id="password"/> 
     </div> 


     <p class="forgot"><a href="#">Forgot Password?</a></p> 


     <button class"Authbtn" id="submit" onclick="afterLogin();">Log In</button> 

     </div> 

    </div> 

で、ここに私のJSコードが

ある

function handleloginIn() { 

    if (firebase.auth().currentUser) { 
    // [START signout] 
    firebase.auth().signOut(); 
    // [END signout] 
    } else { 
    var email = document.getElementById('email').value; 
    var password = document.getElementById('password').value; 
    alert(email); 

    if (email.length < 4) { 
     alert('Please enter an email address.'); 
     return; 
    } 
    if (password.length < 4) { 
     alert('Please enter a password.'); 
     return; 
    } 
    // Sign in with email and pass. 
    // [START authwithemail] 
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { 
     // Handle Errors here. 
     var errorCode = error.code; 
     var errorMessage = error.message; 
     // [START_EXCLUDE] 
     if (errorCode === 'auth/wrong-password') { 
     alert('Wrong password.'); 
      } else { 
      alert(errorMessage); 
      } 

      // [END_EXCLUDE] 
     }); 
     } 
     //Handle Account Status 
     firebase.auth().onAuthStateChanged(user => { 
     if(user) { 
      window.location = "userhome.html"; //After successful login, user will be redirected to index.html 
     } 
     }); 
    } 

。

値が読み取られているかどうかを知りたかったが、何も入力されていないかのように常に空白になりました。値が検出されないので、私はログインできませんでした。この問題を引き起こす可能性のあるものを手伝ってください。

Answer 1

警告の代わりにconsole.logを使用して起動してください。それはおそらく未定義またはnullの場合に表示されます。また、入力とタイプの間にスペースを追加してください。コンソールにgetElementByIdの結果も記録して、それが要素を見つけているかどうかを確認してみてください。そうすれば、問題をよりよく知ることができます。

Answer 2

登録フォームのマークアップがないので、id="email"を2回使用したと仮定します。

ログインフォームを送信すると、javascript document.getElementByIdが（登録フォームに）最初に見つかった要素を取得し、空であると表示されます。

一意のIDまたはクラスを使用する必要があります。でid="register-email"と