CODEWITHSUNDEEP
javascripthtml
saadsaad
saadsaad

Reputation: 33

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>

Upvotes: 0

Views: 99

Answers (2)

Marios Nikolaou
Marios Nikolaou

Reputation: 1336

window.addEventListener("DOMContentLoaded", function(){

      var btn = document.getElementById("btn");
      var txt = document.getElementById("txtInput");

      btn.addEventListener("click", test);
      txt.addEventListener("keydown", key);

function key(evt){

      evt = evt || window.event;

      if (evt.which === 13){
        document.getElementById('btn').click();
      }
    }
});

 <input type="text" id="txtInput" placeholder="Write your word">
 <button id="btn">test</button>

Your code doesn't work because your missing a bracket after the if statement.Also i hope my code will help you.

Upvotes: -1

Scott Marcus
Scott Marcus

Reputation: 65853

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

Upvotes: 3

Related Questions