使用Enter鍵按下事件並單擊鼠標觸發提交按鈕

Question

我是一個初學者，並且正在使用“做到這一點”和關注項目的路線來學習前端。

我的網絡應用程序的工作原理與待辦事項列表類似。

我認為這是因為我對同一元素有兩次“ 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/
• 使用JavaScript在文本框中的Enter鍵上觸發按鈕單擊

Answer 1

無需嘗試使用javascript“單擊”按鈕，只需在Enter鍵上調用所需的功能即可。

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

Answer 2

您的代碼總體來說還可以

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();
  }
});