input value does not change when the "keyup" event is triggered

Question

input value does not change when the "keyup" event is triggered

I'm encountering an issue with the code below. The code is for a simple To Do app using Javascript. I followed a tutorial step by step, but my app isn't functioning as expected. When I press the enter key, the input value should be added to the list, but it's not happening. I've checked the code multiple times and can't seem to find any mistakes.

Even when I manually call the function addToDo("read");, it works fine. However, pressing the enter button doesn't trigger the function. Any suggestions or advice would be greatly appreciated.

document.addEventListener("keyup", function(event) {
    if (event.key === 13) {
        const toDo = input.value;
        if (toDo) {
            addToDo(toDo);
        } //end if toDo
    } // end if event.key

});

javascript

Answer 1

Answer №1

The reason it's not functioning is due to the absence of checking for the correct key value during the keyup event: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

To specifically detect the 'Enter' key on a keyup event, you can do the following:

txtTodo.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') {
    console.log(e.target.value);
  }
});

For a demonstration, visit this live example:
https://jsfiddle.net/dbkf53w2/

Answer 2

The reason it's not functioning is due to the absence of checking for the correct key value during the keyup event: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

To specifically detect the 'Enter' key on a keyup event, you can do the following:

txtTodo.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') {
    console.log(e.target.value);
  }
});

For a demonstration, visit this live example:
https://jsfiddle.net/dbkf53w2/

Answer 3

Answer №2

function createToDo(item) {
  console.log(item);
}

document
  .querySelector('#input-field')
  .addEventListener('keyup', function (event) {
    if (event.key === 'Enter') {
      const newItem = event.target.value;

      if (newItem) {
        createToDo(newItem);
      } //end if newItem
    } // end if event.key
  });

<input type="text" id="input-field>

Answer 4

function createToDo(item) {
  console.log(item);
}

document
  .querySelector('#input-field')
  .addEventListener('keyup', function (event) {
    if (event.key === 'Enter') {
      const newItem = event.target.value;

      if (newItem) {
        createToDo(newItem);
      } //end if newItem
    } // end if event.key
  });

<input type="text" id="input-field>

Answer 5

Answer №3

event.key value is a string. Instead of using the keyCode 13, try using 'Enter'. The keyCode returns numbers when accessing event.keyCode.

document.addEventListener("keyup", function(event){
console.log(event.keyCode);
if(event.key === 'Enter'){
    //const toDo = input.value;
    //if(toDo){
      //  addToDo(toDo);
console.log('Enter')
//}//end if toDo
}// end if event.key
})

<div>Press 'Enter' key on your keyboard</div>

Answer 6

event.key value is a string. Instead of using the keyCode 13, try using 'Enter'. The keyCode returns numbers when accessing event.keyCode.

document.addEventListener("keyup", function(event){
console.log(event.keyCode);
if(event.key === 'Enter'){
    //const toDo = input.value;
    //if(toDo){
      //  addToDo(toDo);
console.log('Enter')
//}//end if toDo
}// end if event.key
})

<div>Press 'Enter' key on your keyboard</div>

input value does not change when the "keyup" event is triggered

Answer №1

Answer №2

Answer №3

Similar questions

Executing an Ajax request that invokes a PHP function

Using the html5-canvas element to drag connected lines

Chat lines in Chrome displaying double entries - troubleshooting needed

Create a dynamic calendar by integrating dates with Javascript and an HTML table

What steps do I need to take to deploy my React app onto a server?

Increasing the upward motion of the matrix raining HTML canvas animation

What is the process for adding an event listener in React?

Limit DerbyJS to re-rendering specific DOM elements

DataTables.Net Buttons not appearing in the interface

Tips for incorporating MUI into your Redwood JS project

Display animated GIFs in the popular 9Gag format

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

What is causing .then() to not wait for the promise to resolve?

Adjust the size of the font in your Bootstrap Table

Is there a way to ensure that a certain block of code in Typescript is executed only after an API call has been completed?

Pusher authentication issue: socket ID not defined

Applying conditional logic within computed properties results in a failure to update

Code functions properly on local host but encounters errors when deployed to live server

Asynchronous data fetching with React Hook useEffect does not properly populate the tooltip in Material UI component

I am uncertain about whether it would be better to utilize URL path parameters or query parameters for filtering on the back-end of the application