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

Question

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

(以下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/task/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>