document.getElementById('l').value; is not working

Question

I have a sign up form similar to this http://codepen.io/ehermanson/pen/KwKWEv . The Signup tab works fine but whenever i click the login tab and entered the email and password, the program seems to be blind to the email value. This is my html code

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

and here is my JS code

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

I added alert(email);

I wanted to know if the value was being read but it always return blank as if nothing was typed in it. Because the values are not being detected I couldn't login. Please help in what could be causing this problem.

Answer 1

Try using console.log instead of alert to start. That will probably show if it's undefined or null. Also add a space between the type and the required attribute on the inputs. Log to the console the the getElementById result too and try see if it is even finding the element and then you'll have a better idea of the issue.