Javascript 将按钮和按键指定给同一事件

我正在用JavaScript制作一个待办事项列表，当我按下add按钮或按enter键时，我想在列表中添加一个项目。我有按钮点击工作，但我不能让输入工作做同样的任务

以下是HTML：

<input type="text" id="myInput" placeholder="Add new task">
  <span onclick="addToList()" class="addBtn">Add!</span>

添加

我的addToList函数：

function addToList() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("Please input a value");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("X");
  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";
    }
  }
}

函数addToList（）{
var li=document.createElement（“li”）；
var inputValue=document.getElementById（“myInput”）.value；
var t=document.createTextNode（inputValue）；
li.儿童（t）；
如果（inputValue==''）{
警报（“请输入一个值”）；
}否则{
文件.getElementById（“myUL”）.appendChild（li）；
}
document.getElementById（“myInput”）.value=“”；
var span=document.createElement（“span”）；
var txt=document.createTextNode（“X”）；
span.className=“关闭”；
span.appendChild（txt）；
李.儿童（span）；
对于（i=0；i

目前我有它一次点击我的按钮。我尝试使用onkeypress进行输入，但不起作用。我还尝试了按下键并选择enter按钮：

<input onkeydown = "if (event.keyCode == 13)
                        document.getElementById('addBtn').click()" type="text" id="myInput" placeholder="Add new task">

但这也不起作用

---

如何编辑现有的addToList函数，以便在Enter上也添加一项？还是为它创建一个全新的函数更好？

Html表单将在单击enter时提交它

<form onsubmit="addToList()">
  <input type="text" id="myInput" placeholder="Add new task">
  <button class="addBtn" type="submit">Add!</button>
</form>

添加

Html表单将负责在单击enter时提交

<form onsubmit="addToList()">
  <input type="text" id="myInput" placeholder="Add new task">
  <button class="addBtn" type="submit">Add!</button>
</form>

添加

添加（写addBtn类时要小心）
document.getElementById（'myInput'）。addEventListener（'keydown'，函数（e）{
如果（e.keyCode==13）{
document.getElementById（'addBtn'）。单击（）
}
})

添加！（请小心编写addBtn类）
document.getElementById（'myInput'）。addEventListener（'keydown'，函数（e）{
如果（e.keyCode==13）{
document.getElementById（'addBtn'）。单击（）
}
})

使用让你的生活变得更加轻松。。。重写/将您的代码分解为以下代码段：

document.addEventListener（“单击”，documentWideHandler）；
文件。添加文件列表器（“键控”，documentWideHandler）；
文件。添加了文件列表器（“聚焦”，documentWideHandler）；
函数documentWideHandler（evt）{
常量原点=evt.target；
//行动取决于事件和/或起源特征
如果（evt.type==“聚焦”&&
origin.id==“myInput”）{
返回文档。querySelector（#warn”）.textContent=“”；
}
如果（evt.type==“keyup”&&
origin.id==“myInput”&&
evt.key==“Enter”| |//注意：event.keyCode已弃用
origin.classList.contains（“addBtn”））{
返回addToList（）；
}
if（origin.classList.contains（“close”））{
//删除似乎更适用
返回原点。最近的（“li”）。删除（）；
}
}
函数addToList（）{
const inputElem=document.querySelector（“#myInput”）；
//通常这是你做的第一件事
//所以你不必做任何其他事情，如果
//没有提供输入
如果（！inputElem.value.trim（）.length）{
//更加用户友好的“警报”
返回文档。查询选择器（“警告”）
.textContent=“请输入任务！”；
}
//使用insertAdjacentHTML
document.querySelector（“#myUl”）.insertAdjacentHTML（`beforeend`，
`
${inputElem.value}
`）；
//通常，这是最不应该做的事情
inputElem.value=“”；
}

正文{
保证金：2rem；
字体：普通12px/15px verdana，arial；
}
.addBtn，
.结束{
光标：指针；
}
李{
列表样式类型：无；
左边距：-2em；
}
.结束：之前{
内容：“\274c”；
保证金权利：0.3雷姆；
}
#警告{
颜色：红色；
显示：内联块；
左边距：1 em；
}

添加

使用让你的生活变得更加轻松。。。重写/将您的代码分解为以下代码段：

document.addEventListener（“单击”，documentWideHandler）；
文件。添加文件列表器（“键控”，documentWideHandler）；
文件。添加了文件列表器（“聚焦”，documentWideHandler）；
函数documentWideHandler（evt）{
常量原点=evt.target；
//行动取决于事件和/或起源特征
如果（evt.type==“聚焦”&&
origin.id==“myInput”）{
返回文档。querySelector（#warn”）.textContent=“”；
}
如果（evt.type==“keyup”&&
origin.id==“myInput”&&
evt.key==“Enter”| |//注意：event.keyCode已弃用
origin.classList.contains（“addBtn”））{
返回addToList（）；
}
if（origin.classList.contains（“close”））{
//删除似乎更适用
返回原点。最近的（“li”）。删除（）；
}
}
函数addToList（）{
const inputElem=document.querySelector（“#myInput”）；
//通常这是你做的第一件事
//所以你不必做任何其他事情，如果
//没有提供输入
如果（！inputElem.value.trim（）.length）{
//更加用户友好的“警报”
返回文档。查询选择器（“警告”）
.textContent=“请输入任务！”；
}
//使用insertAdjacentHTML
document.querySelector（“#myUl”）.insertAdjacentHTML（`beforeend`，
`
${inputElem.value}
`）；
//通常，这是最不应该做的事情
inputElem.value=“”；
}

正文{
保证金：2rem；
字体：普通12px/15px verdana，arial；
}
.addBtn，
.结束{
光标：指针；
}
李{
列表样式类型：无；
左边距：-2em；
}
.结束：之前{
内容：“\274c”；
保证金权利：0.3雷姆；
}
#警告{
颜色：红色；
显示：内联块；
左边距：1 em；
}

添加

您可以将内联if条件更改为separate function onkeydown=“functionName（）”您可以将内联if条件更改为separate function onkeydown=“functionName（）”