为什么完成按钮不能正常工作？答案

【问题标题】：Why is the done button not working properly?为什么完成按钮不能正常工作？
【发布时间】：2023-02-02 21:09:41
【问题描述】：

显然我正在尝试创建一个待办事项列表，当然我可以在其中添加和删除任务。添加任务工作正常；但是单击“完成”按钮可以工作，但不会执行我希望它执行的操作。基本上我有一个逻辑错误，但我不知道如何解决它。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <h1>To-Do List</h1>
  <form id="todoForm">
    <input id="todoInput" />
    <button type="button" onclick="todoList()">New</button>
    <button type="button" onclick="">Retrieve</button>
  </form>
  <ol id="todoList"></ol>
  <script>
    var todos = []; //Problem is from here
    var removed = [];

    function todoList() {
      var item = document.getElementById("todoInput").value;
      todos.push(item);

      var text = document.createTextNode(item);
      var newItem = document.createElement("li");

      newItem.innerHTML = item + ' <button id="Done">Done</button>';
      document.getElementById("todoList").appendChild(newItem);

      const donebtn = document.getElementById("Done");
      donebtn.addEventListener("click", function() {
        removetodo(newItem, item)
      });
    }


    function removetodo(item, tasktext) {
      const tasklist = document.getElementById("todoList");
      tasklist.removeChild(item);
      removed.push(tasktext);
    }
  </script>
</body>

</html>

问题是，我尝试在谷歌和其他地方寻找解决方案；然而，我仍然不知道如何修复它。我不想只更改整个代码以使其正常工作。我特别想要它以我写的方式

【问题讨论】：

您的代码在哪些方面没有按预期工作？请详细说明您观察到的具体问题以及您进行了哪些调试。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从tour 开始并阅读How to Ask 及其链接资源。
看不出任何错误。工作正常，完成按钮删除列表项
问题是完成按钮只适用于添加的第一个任务，每当我点击它时，它会删除所有其他任务，包括它自己。

标签： javascript html arrays list methods

【解决方案1】：

此代码只会在您的函数被调用时运行。

const donebtn = document.getElementById("Done");
      donebtn.addEventListener("click", function() {
        removetodo(newItem, item)
      });

你应该把它放在附加监听器的函数之外。

【讨论】：

【解决方案2】：

这首要问题代码是当您从列表中删除 task 时，它实际上并没有从 todos 中删除它大批.要解决此问题，您可以在从任务中删除任务后添加以下行列表:

todos.splice(todos.indexOf(tasktext), 1);

这第二期是您对所有“完毕" <button> 元素，在 HTML 标记中，ID 应该是唯一的.所以当你使用 document.getElementById("Done") 时，它总是返回具有该 id 的第一个元素。

要解决此问题，您可以使用 class 而不是 id 和查询具有该类的所有元素并将事件侦听器分别附加到每个按钮。

更新代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <h1>To-Do List</h1>
  <form id="todoForm">
    <input id="todoInput" />
    <button type="button" onclick="todoList()">New</button>
    <button type="button" onclick="">Retrieve</button>
  </form>
  <ol id="todoList"></ol>
  <script>
    var todos = [];
var removed = [];

function todoList() {
  let item = document.getElementById("todoInput").value;
  todos.push(item);

  let text = document.createTextNode(item);
  let newItem = document.createElement("li");

  newItem.innerHTML = item + ' <button class="doneBtn">Done</button>';
  document.getElementById("todoList").appendChild(newItem);

  const donebtn = newItem.getElementsByClassName("doneBtn")[0];
  donebtn.addEventListener("click", function() {
    removetodo(newItem, item);
  });
}

function removetodo(item, tasktext) {
  const tasklist = document.getElementById("todoList");
  tasklist.removeChild(item);
  removed.push(tasktext);
  todos.splice(todos.indexOf(tasktext), 1);
}




  </script>
</body>

</html>

【讨论】：

【解决方案3】：

newItem.innerHTML = item + '完成';我更改了这一行，问题是你正在为所有完成分配相同的 id，所以我使用了一个计数变量，当你运行函数时，它在开始时为 0 if will 0 like done0 当函数运行时它会增加 count++ 接下来会增加它完成时间 1 这样您的代码就能正常工作

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>To-Do List</h1>
    <form id="todoForm">
      <input id="todoInput" />
      <button type="button" onclick="todoList()">New</button>
      <button type="button" onclick="">Retrieve</button>
    </form>
    <ol id="todoList"></ol>
    <script> 
      var todos = []; //Problem is from here
      var removed = [];
      
      let count = 0;
      function todoList() { 
        var item = document.getElementById("todoInput").value;
        todos.push(item);

        var text = document.createTextNode(item);
        var newItem = document.createElement("li");

        newItem.innerHTML = item + ' <button id="Done'+count+'">Done</button>';
        document.getElementById("todoList").appendChild(newItem);

        const donebtn = document.getElementById("Done"+count);
        donebtn.addEventListener("click", function(){
          removetodo(newItem, item)
        });
        count++;
      }


      function removetodo(item, tasktext) {
          const tasklist = document.getElementById("todoList");
          tasklist.removeChild(item);
          removed.push(tasktext);
        }
    </script>
  </body>
</html>

还有一个建议

newItem.innerHTML = item + ' <button id="Done'+count+'">Done</button>';
        document.getElementById("todoList").appendChild(newItem);

        const donebtn = document.getElementById("Done"+count);
        donebtn.addEventListener("click", function(){

在你的代码中 const donebtn = document.getElementById("Done"+count);你不需要这一行只是 donebtn.addEventListener("click", function(){ here insted of donebtn 你可以使用 newItem.addEventListener 然后附加它 document.getElementById("todoList").appendChild(newItem);最后用这个。

 newItem.innerHTML = item + ' <button id="Done'+count+'">Done</button>';
        newItem.addEventListener("click", function(){}
document.getElementById("todoList").appendChild(newItem);

像这样

【讨论】：

【解决方案4】：

每次添加新任务时，所有“完成”按钮都具有相同的 ID，这在 HTML 中是不允许的，因为 ID 值在页面中必须是唯一的。这意味着只有第一个“完成”按钮会响应点击事件，所有其他按钮都将被忽略。

您可以尝试的一种方法是将任务文本存储在“完成”按钮的数据属性中，并在删除待办事项像这样识别要删除的任务的功能......

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <h1>To-Do List</h1>
<form id="todoForm">
<input id="todoInput" />
<button type="button" onclick="todoList()">New</button>
<button type="button" onclick="">Retrieve</button>
</form>
<ol id="todoList"></ol>
<script>
var todos = []; 
var removed = [];

function todoList() {
  var item = document.getElementById("todoInput").value;
  todos.push(item);

  var text = document.createTextNode(item);
  var newItem = document.createElement("li");

  newItem.innerHTML = item + ' <button class="Done">Done</button>';
  document.getElementById("todoList").appendChild(newItem);

  const donebtn = newItem.getElementsByClassName("Done")[0];
  donebtn.addEventListener("click", function() {
    removetodo(newItem, item)
  });
  donebtn.setAttribute("data-task", item);
}


function removetodo(item, tasktext) {
  const tasklist = document.getElementById("todoList");
  tasklist.removeChild(item);
  removed.push(tasktext);
}
 </script>
</body>

【讨论】：