How can I use Enter Key instead of clicking the button by switch

Question

I need to use Enter key to trigger my button. it should call function greetings().

HTML

<input id='input' />
    <button onclick='greetings()' id='btn' class="button button5">OK</button>

Javascript

function greetings(){
  let name=document.getElementById('input').value;
  if(document.getElementById('input').value.length!==0){
    console.log(document.getElementById('input').value.length);
    document.getElementById("hed").innerHTML="Hello "+name;

  }
  else{

    document.getElementById("hed").innerHTML='';
  }

}

Answer 1

You have to attach the event to the document:

document.addEventListener("keypress", function(e){
            if (e.key === "Enter"){
              //do your stuff
            }
        }, false);

Please note the use of e.key , do not use e.keyCode cause it's deprecated

Answer 2

KeyboardEvent.code

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value which isn't altered by keyboard layout or the state of the modifier keys. developer.mozilla.org

You need to listen to keydown or keyup events and then check if the event.code is Enter .

 function greetings() { let name = document.getElementById('input'); let text = document.getElementById("hed"); if (name !== 0) { text.innerHTML = "Hello " + name.value; } else { text.innerHTML = ''; } } const body = document.querySelector("body"); body.onkeyup = function(event) { console.log("event", event.code) if (event.code === "Enter") { greetings() } }; 

 <input id="input"> <p id="hed"></p> 

Update

It is better to use event.code instead of event.key since it represents a physical key on the keyboard, not the generated character. Run this code snippet.

 window.addEventListener("keydown", function(event) { let str = "KeyboardEvent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createElement("span"); el.innerHTML = str + "<br/>"; document.getElementById("output").appendChild(el); }, true); 

 #output { font-family: Arial, Helvetica, sans-serif; border: 1px solid black; } 

 <p><strong>Credit:</strong>Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code </p> <hr> <p>Press keys on the keyboard to see what the KeyboardEvent's key and code values are for each one.</p> <div id="output"> </div> 

Answer 3

Here is the running working code snippet, as you required, ENJOY

 function greetings(){ var name=document.getElementById('input').value; if(document.getElementById('input').value.length!==0){ console.log(document.getElementById('input').value.length); document.getElementById("hed").innerHTML="Hello "+name; } else{ document.getElementById("hed").innerHTML=''; } } document.addEventListener("keypress", function(e){ if (e.key === "Enter" || e.which == 13){ greetings(); } }, false); 

 <input id='input' /> <button onclick='greetings()' id='btn' class="button button5">OK</button> <p id="hed"></p>