如何使用 keydown 功能制作 JavaScript 待办事项列表

Question

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

(以下demo包含Bootstrap 类)

JS:

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);
  var text = document.createTextNode(task);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("x"));
  btn.setAttribute("onclick", "remove()");
  btn.setAttribute("class", "btn-primary btn-sm newBtn");
  li.appendChild(text);
  li.appendChild(btn);
  document.getElementById("myUl").appendChild(li);
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  document.getElementById("myUl").removeChild(task);
}

document.getElementById("task").addEventListener("keydown", function(event) {
  if (event.which == 13) {
    var task2 = document.getElementById("task").value;
    array.push(task2);
    var text2 = document.createTextNode(task2);
    var li2 = document.createElement("li");
    var btn2 = document.createElement("button");
    btn2.appendChild(document.createTextNode("x"));
    btn2.setAttribute("onclick", "remove()");
    btn2.setAttribute("class", "btn-primary btn-sm newBtn");
    li2.appendChild(text2);
    li2.appendChild(btn2);
    document.getElementById("myUl").appendChild(li2);
  }
});

HTML:

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

Answer 1

既然您已经将必要的逻辑封装到一个 add() 函数中，为什么不直接在 keydown 事件侦听器中调用它，就像从您的按钮调用它一样onclick听众？

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

附带说明一下，您编写代码的方式不必将 btn2/task2/etc 变量命名为与 btn/[=19 不同的名称=]/etc - 它们仅在其函数范围内可见。在 { } 里面。无论如何，这是一个工作片段：

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);
  var text = document.createTextNode(task);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("x"));
  btn.setAttribute("onclick", "remove()");
  btn.setAttribute("class", "btn-primary btn-sm newBtn");
  li.appendChild(text);
  li.appendChild(btn);
  document.getElementById("myUl").appendChild(li);
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  document.getElementById("myUl").removeChild(task);
}

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainDiv">
  <input id="task" class="input-lg">
  <button id="inputBtn" class="btn-primary btn-lg" onclick="add()">add</button>
</div>
<ul id="myUl"></ul>

Answer 2

这有效。

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>

如何使用 keydown 功能制作 JavaScript 待办事项列表

How to make a JavaScript To-Do list with keydown Function

javascript

arrays

push

keydown

removechild