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

Retrieve parameters from functions and convert them into coherent statements

The basic Kendo UI remote DataSource fails to fetch any data

Guide on utilizing two separate collections to store different types of data for an application's users

React and React Native not synchronizing with authentication context

Exploring the wonders of Jasmine coding with jQuery

storing audio files locally with Vue.js

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

What is the reason behind Angular not allowing users to define @Output events that begin with 'on'?

Is there a way to display the product name in the input field when it is selected using the keyboard?

Tips for resizing an image instead of a line in HTML5 canvas

ng-html-bind for a label with a checkbox

Combine multiple arrays of JSON objects into a single array while ensuring no duplicates

Using the power of HTML5, store data locally on

unable to retrieve data using ajax

What is the best way to dynamically update a specific value within an object based on the current state in React/Next?

Prevent unauthorized AJAX requests from external sources within the Node application

A React component that exclusively renders component tags

Each slider only displays a single database entry

A TypeError is thrown when attempting to use window[functionName] as a function

Employing jQuery to add an element as a sibling rather than a child node