How can I call a function when I press the enter key?

Question

I'm making a password thing for my website. How can I check if the password is correct by pressing the enter key instead of pressing the submit button? Help would be appreciated.

<html>
 <script>
  function checkPassword() {
   var password = document.getElementById("passwordBox");
   var passwordText = password.value;
   if(passwordText == "password") {
    alert("you got it right");
    return true;
   }
   alert("you got it wrong");
   return false;
   }
   
 </script>
</head>
<body>
 <p style="font-size: 30pt;">something</p>
 <p>Please enter the password to uh... something </p>
 <p>Password: <input id="passwordBox" type="password"/></p>
 <button onclick="return checkPassword();">
    Submit
 </button>
</html>

Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/docs/Web/Guide/Events). What exactly do you need help with? Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Dec 02 '21 at 19:25
Just for the record, client-side password checks are inherently useless and trivial to bypass. — Siguza, Dec 02 '21 at 20:50

score 1 · Answer 1 · answered Dec 02 '21 at 19:36

wrap you input and button in <form> tag and use submit listener you don't need to write onclick and enter click one by one, it will be big mess up in code, on button element ise type="submit" which means it is part of form and it will execute the function if you will click enter or button, I also removed return true and false because it doesn't make any sense in code also read about what is e.preventDefult()

const passInput = document.getElementById("passwordBox")
const form = document.getElementById("form")

form.addEventListener("submit", (e) => {
  e.preventDefault()

   var passwordText = passInput.value;
   if(passwordText == "password") {
    alert("you got it right");
   }else alert("you got it wrong");
})

<p style="font-size: 30pt;">something</p>
<p>Please enter the password to uh... something </p>

<form id="form">
  <p>Password: <input id="passwordBox" type="password" /></p>
  <button type="submit">Submit</button>
</form>

score 0 · Answer 2 · answered Dec 02 '21 at 19:36

The simplest way to handle enter key press is wrapping it inside a form and setting the onSubmit on the form and type="submit" on the button.

Here is the example.

<html>
    <head>
        <script>
        function checkPassword() {
            var password = document.getElementById("passwordBox");
            var passwordText = password.value;
            if (passwordText == "password") {
            alert("you got it right");
            return true;
            }
            alert("you got it wrong");
            return false;
        }
        </script>
    </head>
    <body>
        <p style="font-size: 30pt">something</p>
        <p>Please enter the password to uh... something</p>

        <form onsubmit="checkPassword()">
        <p>Password: <input id="passwordBox" type="password" /></p>
        <button type="submit">Submit</button>
        </form>
    </body>
</html>

How can I call a function when I press the enter key?

2 Answers2