如何在待办清单的文本框按下回车键后触发Add按钮功能？

你的代码存在两处核心错误导致回车触发新增逻辑失效：

• 逻辑位置错误：你将回车事件的监听代码写在了newElement()函数内部，只有手动点击过一次Add按钮触发该函数后，监听才会被注册到页面上，页面首次加载时完全没有对应的回车监听，自然无法生效。
• 触发对象错误：你获取了输入框#myInput调用click()，但新增待办的点击事件是绑定在Add按钮.addBtn上的，输入框本身没有绑定对应的点击处理逻辑，触发点击也不会执行新增操作。

修复步骤 #

1. 把你写在newElement()函数末尾的回车监听代码完全删掉，移到JS代码的最外层（全局作用域）
2. 修改监听内的触发逻辑，直接调用newElement()即可，不需要模拟按钮点击，也可以优化为仅当输入框聚焦时才触发回车新增，避免全局回车误触发。

修复后的完整JS代码如下： #

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// 新增：输入框回车监听，仅输入时触发
const myInput = document.getElementById('myInput')
myInput.addEventListener('keyup', function (e) {
  if (e.key === 'Enter') {
     newElement()
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

优化说明 #

• 把监听绑定到输入框本身而非全局window，避免用户在页面其他位置按回车误触发新增逻辑
• 用e.key === 'Enter'替代已被W3C废弃的keyCode属性，兼容性更好
• 直接调用newElement()函数，不需要模拟DOM点击，性能更高逻辑更清晰

内容的提问来源于stack exchange，提问作者Katie Jones