JavaScript enter Key

Question

I have made a simple code that changes the heading when you input text in the input, but I want the event to trigger when I press the enter key as I have to press the button to get it to work, is there a piece of code I can implement to have his work? cheers.

function block() {
  var myValue = document.getElementById('textBox').value;
  if (myValue.length == 0) {
    alert('Please fill with valid text');
    return;
  }
  var myTitle = document.getElementById('Heading');
  myTitle.innerHTML = myValue;
};

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fundamentals.css">
    <script src="fundamentals.js"></script>
    <title>Javscript</title>
  </head>
  <body>
    <h1 id="Heading">This is a heading</h1>
    <input type="text" id="textBox">
    <input type="submit" value="Click Me" onclick="block()">
  </body>
</html>

[Possible duplicate](https://stackoverflow.com/a/17015116/4476484) — nullromo, Jun 28 '22 at 19:15
Something like this? https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp — zero2579, Jun 28 '22 at 19:17
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeyup — Lucretius, Jun 28 '22 at 19:18

score 0 · Answer 1 · edited Jun 28 '22 at 19:24

Wrap your input in a form element, so Enter triggers a submit event:

document.getElementById('heading-changer').addEventListener('submit', function (event) {
  event.preventDefault(); // otherwise page reloads
  var myValue = document.getElementById('textBox').value;
  if (myValue.length == 0) {
    alert('Please fill with valid text');
    return;
  }
  var myTitle = document.getElementById('Heading');
  myTitle.innerHTML = myValue;
});

<h1 id="Heading">This is a heading</h1>
<form id="heading-changer">
  <input type="text" id="textBox">
  <input type="submit" value="Click Me">
</form>

Or you can do this:

function handleKeyPress(e){
    if(e.keyCode === 13){
        e.preventDefault(); 

        var myValue = e.target.value;
        if (myValue.length == 0) {
          alert('Please fill with valid text');
          return;
        }
        
        var myTitle = document.getElementById('Heading');
        myTitle.innerHTML = myValue;
    }
}

<h1 id="Heading"></h1>
<input onkeypress={handleKeyPress(event)} />

score 0 · Answer 2 · answered Jun 28 '22 at 19:24

Add an eventListener to the input that is fires when keypressed, it the key is enter, then tha function is the same, as you made.

I found this one on W3Schools

var myInput = document.getElementById("textBox");
var myTitle = document.getElementById("Heading");

myInput.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    if (myInput.value.length == 0) {
      alert("Please fill with valid text");
      return;
    }
    event.preventDefault();
    myTitle.innerHTML = myInput.value;
  }
});

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fundamentals.css">
    <script src="fundamentals.js"></script>
    <title>Javscript</title>
  </head>
  <body>
    <h1 id="Heading">This is a heading</h1>
    <input type="text" id="textBox">
  </body>
</html>

JavaScript enter Key

2 Answers2