如何使用keydown函数制作JavaScript待办事项列表

我正在尝试制作一个带有数组、push方法、removeChild方法和keydown函数的JavaScript待办事项列表应用程序。我希望用户能够使用add按钮和enter键输入输入。我成功地制作了一个应用程序，它最终有两个功能，两组类似的变量和DOM方法：一个用于添加按钮，另一个用于按键功能（当用户在添加输入后点击enter键）。此设置似乎工作正常。但是，我想知道是否有可能创建一个函数，用一组DOM方法同时方便Add按钮和keydown函数。如果是这样，有人能提供一个潜在的演示吗？谢谢

（以下演示包含引导类）

JS:

HTML:

添加

既然您已经将必要的逻辑封装到一个

add（）

函数中，为什么不在

keydown

事件侦听器中调用它，就像在按钮的

onclick

侦听器中调用它一样

document.getElementById("task").addEventListener("keydown", function(event) {
  if (event.which == 13) {
    add();
  }
});

作为旁注，您编写代码的方式，不必将

btn2

/

task2

/etc变量与

btn

/

task

/etc分开命名-它们只在其函数范围内可见。在

{}

内部，即。 无论如何，这里有一个工作片段：

var数组=[]；
函数add（）{
var task=document.getElementById（“任务”）.value；
array.push（任务）；
var text=document.createTextNode（任务）；
var li=document.createElement（“li”）；
var btn=document.createElement（“按钮”）；
btn.appendChild（document.createTextNode（“x”））；
setAttribute（“onclick”、“remove（）”）；
btn.setAttribute（“类”、“btn主btn sm NEBTN”）；
李.附件（文本）；
李.儿童(btn);；
文件.getElementById（“myUl”）.appendChild（li）；
}
函数删除（）{
var task=this.event.currentTarget.parentNode；
document.getElementById（“myUl”）.removeChild（任务）；
}
document.getElementById（“任务”）.addEventListener（“键控”），函数（事件）{
if（event.which==13）{
添加（）
}
});

添加
这是可行的

var array = [];

// add the event listeners.
document.querySelector("#inputBtn").addEventListener("click", createToDO);
document.querySelector("#task").addEventListener("keydown", createToDO);

function createToDO(e) {
    var eventNum = e.which; //grab the event number

    if (eventNum === 1 || eventNum === 13) { // checks for both the button press and enter
        var li = document.createElement("li"),
            btn = document.createElement("button"),
            task = document.getElementById("task").value,
            text = document.createTextNode(task);

        array.push(task);
        btn.appendChild(document.createTextNode("Remove"));
        btn.addEventListener("click", remove);
        btn.setAttribute("class", "btn-primary btn-sm newBtn");
        li.appendChild(text);
        li.appendChild(btn);
        document.querySelector("#myUl").appendChild(li);
    }
}

function remove(e) {
    var task = e.target.parentElement;
    task.remove();
}

您不需要在HTML中添加单击处理程序。此解决方案通过JavaScript添加侦听器

<div class="mainDiv">
        <input id="task" class="input-lg">
        <!-- <button id="inputBtn" class="btn-primary btn-lg" onclick="add()">add</button> -->
        <button id="inputBtn" class="btn-primary btn-lg">add</button>
    </div>
    <ul id="myUl"></ul>


添加

这太棒了。非常感谢！
var array = [];

// add the event listeners.
document.querySelector("#inputBtn").addEventListener("click", createToDO);
document.querySelector("#task").addEventListener("keydown", createToDO);

function createToDO(e) {
    var eventNum = e.which; //grab the event number

    if (eventNum === 1 || eventNum === 13) { // checks for both the button press and enter
        var li = document.createElement("li"),
            btn = document.createElement("button"),
            task = document.getElementById("task").value,
            text = document.createTextNode(task);

        array.push(task);
        btn.appendChild(document.createTextNode("Remove"));
        btn.addEventListener("click", remove);
        btn.setAttribute("class", "btn-primary btn-sm newBtn");
        li.appendChild(text);
        li.appendChild(btn);
        document.querySelector("#myUl").appendChild(li);
    }
}

function remove(e) {
    var task = e.target.parentElement;
    task.remove();
}

<div class="mainDiv">
        <input id="task" class="input-lg">
        <!-- <button id="inputBtn" class="btn-primary btn-lg" onclick="add()">add</button> -->
        <button id="inputBtn" class="btn-primary btn-lg">add</button>
    </div>
    <ul id="myUl"></ul>