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

本篇文章向大家介绍《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后，该任务会自动归类到已完成列表中。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。