输入值不响应“keyup”事件

Question

I am having problem with the following code. It is a simple To Do app with Javascript. Following a tutorial, followed to the t. My app isn't working the way it is supposed to. When I press the enter key the input value should be added to the list and it is not. I can't find any flaw in the code.

Also when I call the function manually addToDo("read"); it shows up alright. But the enter button is not responding. Any advice will be 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

});

Answer 1

It doesn't work because you're not checking for the proper key value on the keyup event: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

You can check for the 'Enter' key on the keyup event like so:

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

A live example can be found here:
https://jsfiddle.net/dbkf53w2/

Answer 2

 function addToDo(val) { console.log(val); } document.querySelector('#input-field').addEventListener('keyup', function (event) { if (event.key === 'Enter') { const toDo = event.target.value; if (toDo) { addToDo(toDo); } //end if toDo } // end if event.key });

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

Answer 3

event.key value has a string value. Try with 'Enter' rather than 13. Number is keyCode. When trying to console event.keyCode then it shows numbers.

 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>Push 'Enter' please</div>