DOM实现JS TodoList，任务选中后无法自动归类到已完成，问题出在哪里？-html教程-PHP中文网

DOM实现JS TodoList，任务选中后无法自动归类到已完成，问题出在哪里？

DDD

发布： 2024-10-28 08:03:18

原创

1100人浏览过

DOM实现JS TodoList，任务选中后无法自动归类到已完成，问题出在哪里？

通过dom实现js todolist，无法将任务自动归类到“已完成”

问题描述：
在进行的任务选中checkbox后，无法自动归类到已完成，而是直接移除了。

尝试过的解决方法：
尝试移除css文件，以排除css样式影响。

问题复现代码：
HTML：

// 主页
...
<section id="content">
  <h1>正在进行<span id="todoCount"></span></h1>
  <ul id="todoList"></ul>
  <h1>已经完成<span id="doneCount"></span></h1>
  <ul id="doneList"></ul>
</section>
...

登录后复制

JS：

// 获取容器DOM
let contentDom = document.getElementById("content");

// 通过事件代理的方式，监听input派发的change事件
contentDom.addEventListener("change", (event) => {
  let target = event.target;
  if (target.dataset.from === "todo" && target.tagName === "INPUT") {
    let index = +target.dataset.index;
    // 删除这一项
    let value = data.todoArr.splice(index, 1)[0];
    // 添加到done
    data.doneArr.push(value);
    render(data);
  } else if (target.dataset.from === "done" && target.tagName === "INPUT") {
    let index = +target.dataset.index;
    let value = data.doneArr.splice(index, 1)[0];
    data.todoArr.push(value);
    render(data);
  }
});

登录后复制

CSS：
省略...

期待结果：
选中某个正在进行的任务的checkbox后，该任务项应该移动到“已完成”列表中。

实际错误：
选中checkbox后，任务项直接从“正在进行”列表中移除，而没有添加到“已完成”列表中。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

解决方法：
仔细审查了代码后，发现了一个单词拼写错误。

在以下js代码段中：

contentDom.addEventListener("change", (event) => {
  let target = event.target;
  if (target.dataset.from === "todo" && target.tagName === "INPUT") {
    ...
  } else if (target.dataset.from === "done" && target.tagName === "INPUT") {
    ...
  }
});

登录后复制

拼写错误：
"from" 拼写错误，应该是 "form"。

更正后：

contentDom.addEventListener("change", (event) => {
  let target = event.target;
  if (target.dataset.form === "todo" && target.tagName === "INPUT") {
    ...
  } else if (target.dataset.form === "done" && target.tagName === "INPUT") {
    ...
  }
});

登录后复制

结果：
更正拼写错误后，程序正常工作。选中正在进行的任务的checkbox后，该任务会自动归类到已完成列表中。

以上就是DOM实现JS TodoList，任务选中后无法自动归类到已完成，问题出在哪里？的详细内容，更多请关注php中文网其它相关文章！