使用 Enter 按键事件和鼠标单击触发提交按钮

我是一个完全的初学者，正在使用“Just do it”和以项目为中心的路线学习前端。

我的网络应用程序的工作原理基本上与待办事项列表类似。

我认为这是因为我对同一个元素有两次“getElementById”。

这最初有效：

// add idea to list button

document.getElementById('btnSubmit').addEventListener("submitIdea", submitIdea);

function submitIdea() {
    var ul = document.getElementsByClassName('anIdea')[0];
    var enterIdea = document.getElementById('enterIdea');
    var li = document.createElement('li');
    li.setAttribute('class', enterIdea.value);            
    li.appendChild(document.createTextNode(enterIdea.value));
    ul.prepend(li);
    li.contentEditable = 'true';
};

但是，当我添加此代码时，我无法在输入框中写入任何内容：

// use enter key to submit new li item

document.getElementById("enterIdea").addEventListener('keypress', function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById('btnSubmit').click();
    }
});

这些是我使用的资源：

• https://memorynotfound.com/dynamically-addremove-items-list-javascript/ https://memorynotfound.com/dynamically-addremove-items-list-javascript/
• 使用 JavaScript 在文本框中按 Enter 键触发按钮单击 https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box

你的代码总体来说没问题

document.getElementById('btnSubmit').addEventListener("click", function() {
  var ul = document.getElementsByClassName("anIdea")[0];
  var enterIdea = document.getElementById("enterIdea");
  var li = document.createElement("li");
  li.setAttribute('class', enterIdea.value);
  li.contentEditable = "true";
  li.appendChild(document.createTextNode(enterIdea.value));
  ul.prepend(li);
});

document.getElementById("enterIdea").addEventListener("keypress", function(event) {
  if (event.keyCode === 13) {
    document.getElementById("btnSubmit").click();
  }
});