saadsaad saadsaad - 12 days ago 6
HTML Question

Trigger a button when the user click in Enter button

I want to trigger a button click when the user presses in the Enter button inside an input. I tried to do this, but without any success. Here's my attempt:



<!DOCTYPE html>
<html>

<head>
<title>Exercice 1</title>
<meta charset="utf-8">
<script>
function key() {
if (event.keyCode == 13) {
document.getElementById('btn').click()
}

function test() {
alert('okay');
}
</script>
</head>

<body>
<form>
<input type="text" placeholder="Write your word" onkeydown="key()" />
</form>
<button id="btn" onClick="test()">test</button>
</body>

</html>




Answer

You have a syntax error. You were just missing a closing curly brace afer your if statement.

// Modern browsers send an event object to the event
// callback function
function key(evt){
  // But, older versions of IE expose the event as a property
  // of the window object, so let's make sure we have a good
  // reference to it:
  evt = evt || window.event;

  // Getting the key code has never been standardized until 
  // fairly recently. event.which is the recommended approach
  if (evt.which === 13){
    document.getElementById('btn').click();
  } // <-- You were missing this.
}
         
function test(){
  alert('okay');
}
<form>
	<input type="text" placeholder="Write your word" onkeydown = "key()"/>
</form>
<button id="btn" onClick="test()">test</button>

And, we really should avoid inline HTML event handling as it violates the separation of concerns between HTML and JavaScript, it causes a global anonymous proxy function to be created that modifies this binding in the callback and doesn't leverage the modern W3C DOM Level 2 Event Handling standard

Here's the modern way to hook event handlers up:

window.addEventListener("DOMContentLoaded", function(){
  
  var btn = document.getElementById("btn");
  var txt = document.getElementById("txtInput");
  
  btn.addEventListener("click", test);
  txt.addEventListener("keydown", key);

    // Modern browsers send an event object to the event
    // callback function
    function key(evt){
      // But, older versions of IE expose the event as a property
      // of the window object, so let's make sure we have a good
      // reference to it:
      evt = evt || window.event;

      console.log("Callback function invoked by: " + evt.target);
      console.log("Key pressed was: " + evt.which);      
      
      // Getting the key code has never been standardized until 
      // fairly recently. event.which is the recommended approach
      if (evt.which === 13){
        document.getElementById('btn').click();
      } // <-- You were missing this.
    }
             
    function test(){
      alert('okay');
    }
  
});
 <input type="text" id="txtInput" placeholder="Write your word">
 <button id="btn">test</button>

Comments