javascript - 如何按回车键执行功能

Question

我试图制作一个在按下某个键时执行功能的事件。我添加了一个 eventListener ，它寻找 keypress === 13 (输入键)，但它没有工作并且我在控制台上没有错误消息。在我看来，我的 eventListener可以访问全局范围内的我的函数 addItem。我真的不明白为什么它不起作用。

HTML:

<div class="container w-25">
  <div class='header'>
    <input class='mt-50' type='text' id='myInput' placeholder='Add a to-do'>
    <button id='btn' type='button'>Add</button>
  </div>
  <div class='content'>
    <ul id='list'>
      <li>Clean cauldron</li>
      <li>Beat Drago</li>
      <li>Study for B.U.S.E.</li>
      <li>Win quidditch cup</li>
    </ul>
  </div>
</div>

JavaScript:

let close = document.getElementsByClassName('close');
let btn = document.getElementById('btn');
let myList = document.getElementsByTagName('li');
let myInput = document.getElementById('myInput');

for (let i = 0; i < myList.length; i++) {
    let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    myList[i].appendChild(span);
}



for (let i = 0; i < close.length; i++) {
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
    })
}

btn.addEventListener('click', addItem);

function addItem() {
    let li = document.createElement('li');
    let myInput = document.getElementById('myInput').value;
    let newText = document.createTextNode(myInput)
    li.appendChild(newText);
    if (myInput === ''){
        alert('enter a to-do please')
    }else{
        document.getElementById('list').appendChild(li);
    }

 let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    li.appendChild(span);
    let close = document.getElementsByClassName('close');
    for (let i = 0; i < close.length; i++)
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
});

}


btn.addEventListener('click', function() {
    document.getElementById('myInput').value= '';
});


myInput.addEventListener('keydown', function(e) {
   if (e.keycode === 13) {
       addItem();
   }; 
});

Answer 1

“keyCode ”写在 camelCase .

工作示例:

document.onkeypress = function (e) {
  if (e.keyCode == 13) {
    alert("Enter pressed!");
  }
};

<h1>Hello, World!</h1>