Tips on utilizing the enter key to add my <li> element to the list?

Question

Tips on utilizing the enter key to add my <li> element to the list?

Currently, my to-do list setup requires users to click a button in order to add a new list item. I am looking to enhance the user experience by allowing them to simply hit "enter" on their keyboard to achieve the same result.

Here is the JavaScript code I utilized to dynamically create a new list item and append it to my existing list:

function newElement(){
    var li = document.createElement('li');
    var inputValue = document.getElementById("myInput").value;
    li.appendChild(document.createTextNode(inputValue));
        if (inputValue === '') {
        alert("You must write something!");
      } else {
        document.getElementById("list").appendChild(li);
      }

    document.getElementById("myInput").value = "";

Below is the HTML code for the button that triggers the execution of the newElement() function mentioned above:

<input type="text" id="myInput" placeholder="Type Task Here">
        <button class="submitButton" type="button" onclick="newElement()">Add To List</button>

javascript button enter onkeypress

Answer 1

Answer №1

Utilize the keydown event and check for the keyCode

document.addEventListener("keydown", function (event) {
  if (event.keyCode === 13) {
    executeAction();
  }
});

If you prefer this action to occur specifically on an input, consider adding the event listener directly onto the input element

document.querySelector("input").addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    console.log("The Enter key was pressed.")
  }
});

<input type="text" placeholder="Type and Press Enter" />

Answer 2

Utilize the keydown event and check for the keyCode

document.addEventListener("keydown", function (event) {
  if (event.keyCode === 13) {
    executeAction();
  }
});

If you prefer this action to occur specifically on an input, consider adding the event listener directly onto the input element

document.querySelector("input").addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    console.log("The Enter key was pressed.")
  }
});

<input type="text" placeholder="Type and Press Enter" />

Tips on utilizing the enter key to add my <li> element to the list?

Answer №1

Similar questions

What is the method for executing PHP code without the need for users to access the webpage?

Issue: The variable does not appear to be getting updated

Tips for utilizing the "get" method in React to submit a form

Amchart 5: Tracking Cursor Movement on the X Axis

Tips for utilizing New FormData() to convert Array data from an Object for executing the POST request with Axios in ReactJs

What is an alternative way to use mobx-react 'observer' that does not involve the decorator syntax?

The sequence of Angular directives being executed

StyledTab element unable to receive To or component attributes

Move the cursor within the text area upon clicking the button

React Application Issue 'Error: React is not defined'

Dynamically manipulate the perspective camera by moving and rotating it using a 4x4 matrix

What causes Jest to throw ReferenceErrors?

Eliminating characteristics and rejuvenating the component

Troubleshooting: Issue with Updating Prototype Ajax Function

The response from the $http POST request is not returning the expected

What is the process for integrating a gltf model into Aframe & AR.js with an alpha channel?

VS Code lacks autocomplete intellisense for Cypress

Merging a variable and its corresponding value in JavaScript

Preventing the mysql server called by php from running when the website is refreshed

Utilize Vue Component by assigning a computed property to the data source