SubmitForm when pressing Enter (To-do-list)-CodePudding

I was building a To Do List with HTML and JavaScript and now I want to add input not only with the submit button but also if i press enter anywhere on the page. I mainly wanna use javascript only to create that function, no "onclick" feature in html.

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>To do app</title>
      </head>
      <body>
        <h1>To-Do List</h1>
        <form>
          <input type="text" placeholder="Add an item!" id="inputField" />
        </form>
        <button id="submit">Submit</button>
        <button id="clear">Clear List</button>
        <div id="output"></div>
        <script src="script.js"></script>
      </body>
    </html>

----------------------------------
    document.getElementById("submit").addEventListener("click", function () {
      submitForm();
    });
    
    document.getElementById("clear").addEventListener("click", function () {
      document.getElementById("inputField").value = "";
      document.getElementById("myOl").innerHTML = "";
    });
    
    function submitForm() {
      let input = document.getElementById("inputField").value;
    
      let ol = document.createElement("ol");
      ol.setAttribute("id", "myOl");
      document.body.appendChild(ol);

      let y = document.createElement("LI");
      let t = document.createTextNode(`${input}`);
      y.appendChild(t);
      document.getElementById("myOl").appendChild(y);
    
      document.getElementById("inputField").value = "";
    }

CodePudding user response：

You could use keypress event listner with document.addEventListener and check for the event.key, event.keyCode and event.which combination to check for enter key.

Dont forget to use event.preventDefault() to prevent reload of page.

document.getElementById("submit").addEventListener("click", function () {
  submitForm();
});

document.getElementById("clear").addEventListener("click", function () {
  document.getElementById("inputField").value = "";
  document.getElementById("myOl").innerHTML = "";
});

document.addEventListener('keypress', function (e) {
  const code = (e.keyCode ? e.keyCode : e.which);
  if (e.key === 'Enter' || code == 13) {
    submitForm();
    e.preventDefault();
  }
});

function submitForm() {
  let input = document.getElementById("inputField").value;

  let ol = document.createElement("ol");
  ol.setAttribute("id", "myOl");
  document.body.appendChild(ol);

  let y = document.createElement("LI");
  let t = document.createTextNode(`${input}`);
  y.appendChild(t);
  document.getElementById("myOl").appendChild(y);

  document.getElementById("inputField").value = "";
}

<h1>To-Do List</h1>
<form>
  <input type="text" placeholder="Add an item!" id="inputField" />
</form>
<button id="submit">Submit</button>
<button id="clear">Clear List</button>
<div id="output"></div>

CodePudding user response：

You can use key up event.

document.addEventListener('keyup', keypress);
function keypress(e){
    e.preventDefault()
    if (e.key === 'Enter' || e.keyCode === 13) {
        submitForm();
    }
}

added e.preventDefault() to avoid form submission

https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event