title: Adding event listener to button with password field
body: <p>I have a simple form that asks for a password, and a button that takes you to another page if the password is correct:</p>
  
  <pre><code>&lt;div class="password"&gt;
      &lt;form&gt;
              &lt;label for="pswd"&gt;Enter password: &lt;/label&gt;
              &lt;input type="password" id="pswd"&gt;
              &lt;input type="button" id="myBtn" value="submit" onclick="checkPswd();" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I tried to enable submitting the password by hitting enter as well. The javascript is as follows:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          var input = document.getElementById("pswd");
          input.addEventListener("keyup",function(event){
              event.preventDefault();
              console.log('event');
              if(event.keyCode == 13){
                  document.getElementById("myBtn").click();
                  console.log("enter");
              }
          });
              function checkPswd() {
                  var confirmPassword = "password";
                  var password = document.getElementById("pswd").value;
                  console.log(password)
                  if (password == confirmPassword) {
                       window.location="next.html";
                  }
                  else{
                      alert("Passwords do not match.");
                  }
              }
  
          &lt;/script&gt;
  </code></pre>
  
  <p>This doesn't work however; nothing happens when I hit enter. Nothing gets logged to the console. If I add the event listener to the whole document, it does register the enter key press, but it says the passwords don't match. The value of the password field seems to be empty. What am I doing wrong?</p>
  
  <p>(Note that it works when I click on the submit button with my mouse)</p>