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

7jmck4yq 于 2023-02-06 发布在其他

关注(0)|答案(4)|浏览(121)

显然，我正试图创建一个待办事项列表，当然我可以在其中添加和删除任务。然而，点击完成按钮工作，但不做我想做的事情。基本上我有一个逻辑错误，但我不知道该怎么做来修复它。

- 法典**

<!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>

问题是，我试着在谷歌和其他地方找到解决方案;然而，我仍然不知道如何修复它。我不想只是改变整个代码，使它可以工作。我特别希望它的方式，我写它

Html

来源：https://stackoverflow.com/questions/75323500/why-is-the-done-button-not-working-properly

4条答案

按热度按时间

fbcarpbf1#

内部HTML =项目+'完成';我修改了这一行，问题是你给所有done分配了相同的id，所以我使用了一个count变量，它位于开始0，当你运行函数时，如果will0喜欢done0，当函数运行时，它将增加count ++将在下次done1时增加它，所以你的代码将正确工作

<!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(){

在代码中，常量donebtn = document.getElementById（"完成"+计数）;你不需要这一行，只要完成btn. addEventListener（"click"，function（）{这里代替完成btn，你可以使用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);

像这样

赞(0）回复(0）举报 2023-02-06

4szc88ey2#

此代码将仅在调用函数时运行。

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

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

赞(0）回复(0）举报 2023-02-06

gupuwyp23#

代码的第一个问题是，当您从列表中删除task时，它实际上并没有从todos数组中删除它。要解决这个问题，您可以在从列表**中删除任务后添加以下行：

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

- 第二个问题**是您对所有“Done”<button>元素使用相同的id，在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>

赞(0）回复(0）举报 2023-02-06

t1rydlwq4#

每次添加新任务时，所有“完成”按钮都有相同的id，这在HTML中是不允许的，因为id值在页面中必须是唯一的。这意味着只有第一个“完成”按钮会响应单击事件，其他所有按钮都将被忽略。
您可以尝试的一种方法是将任务文本存储在“Done”按钮的数据属性中，并在 removetodo 函数中使用它来标识要删除的任务，如下所示...

<!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>

赞(0）回复(0）举报 2023-02-06

我来回答

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

4条答案

相关问题

热门标签

最新问答