Question

我正在尝试制作一个简单的购物清单应用，用户可以在其中添加，删除并在完成时将任务标记为完成。到目前为止，我能够添加任务，但是在执行完成和删除功能时遇到问题。我收到一个错误消息，因为当我执行它时，“完成”和“删除”按钮不存在，但是我应该怎么做才能解决它？

var inp = document.getElementById("form");
var button = document.getElementById("click");

//Create List Function with Done and Delete Buttons
function addVal() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  var span = document.createElement("span");
  var done = document.createElement("button");
  var del = document.createElement("button");

  li.appendChild(document.createTextNode(""));
  span.appendChild(document.createTextNode(inp.value));
  done.appendChild(document.createTextNode("Done"));
  del.appendChild(document.createTextNode("Delete"));
  li.appendChild(span);
  li.appendChild(done);
  li.appendChild(del);
  done.setAttribute("class", "doneBut");
  del.setAttribute("class", "delBut");
  ul.appendChild(li);
  inp.value = "";
}

//Get Input Length
function checkLength() {
  return inp.value.length;
}

//Run function on Button Click
function onButtonClick() {
  if (checkLength() > 0) {
    addVal();
  }
}

//Run function on Enter Keypress
function onEnter(event) {
  if (checkLength() > 0 && event.which === 13) {
    addVal();
  }
}

//Trigger Events
button.addEventListener("click", onButtonClick);
inp.addEventListener("keypress", onEnter);

//Done and Delete Button Functions
var doneButton = document.getElementsByClassName("doneBut");
var deleteButton = document.getElementsByClassName("delBut");

function doneTask() {
  doneButton.parentNode.classList.add("done");
}

function delTask() {
  deleteButton.parentNode.classList.add("delete");
}

doneButton.addEventListener("click", doneTask);
deleteButton.addEventListener("click", delTask);

<input type="text" placeholder="Enter Your Task..." id="form" />
<button id="click">Add Task</button>
<h2>List:</h2>
<ul id="list"></ul>

请帮助。

Answer 1

最有可能是因为您的脚本在代码运行之前就已运行。在结束<script>标记之前添加</body>标记以对其进行修复：

<script>/* Your code here */</script>
</body>

Answer 2

您需要将其放置在window.onload函数中，或在body标签的onload内部的函数中运行它。运行脚本时这些元素尚不存在：

window.onload = function() {
    var inp = document.getElementById("form");
    var button = document.getElementById("click");
    button.addEventListener("click", onButtonClick);
    inp.addEventListener("keypress", onEnter);
}

Answer 3

您的问题是代码尝试在按钮存在之前添加事件。在调用addVal函数之前，这些按钮不存在。由于在尝试添加事件处理程序之前未调用addVal，因此getElementById返回null，然后尝试将事件侦听器添加为null。

此外，您似乎打算添加多个“完成”和“删除”按钮。通常，这不是问题，除非您按ID引用它们，并且ID 必须是唯一的。您需要将其切换为类或属性，因为购物车中的每个商品都需要一个。

您可能需要调查事件委托，以便可以在任何按钮存在之前将事件一次添加到页面中。 https://javascript.info/event-delegation

JavaScript函数执行中面临的问题

3 个答案: