使用 JS 实现待办事项列表，点击“正在进行”任务复选框为什么无法自动分类到“已完成”？

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《使用 JS 实现待办事项列表，点击“正在进行”任务复选框为什么无法自动分类到“已完成”？ 》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

使用 JS 实现待办事项列表，无法通过 DOM 将值渲染到网页

在使用 JS 实现待办事项列表时，遇到了如下问题：当我点击“正在进行”任务中的复选框时，任务无法自动分类到“已完成”中。

问题产生的平台版本及尝试过的解决方法：

• 已尝试移除 CSS 文件，以排除其对内容的覆盖。

相关代码：

主页面

...
<input type="checkbox" id="checkb" data-form="todo" data-index="${i}">
...

JS 文件

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") {
    ...
  }
});

预期结果：

• 点击“正在进行”任务中的复选框后，该任务应自动分类到“已完成”中。

实际错误信息：

• 未出现任何实际错误信息。

解决方法：

问题出在单击“正在进行”任务复选框后的错误处理逻辑中。在此例中，使用了 target.dataset.form 获取元素的 data-form 属性，但代码中将 form 错误地拼写为 from。

为了解决问题，需将以下代码中的 from 全局替换为 form：

data-form="todo"
data-form="done"

今天关于《使用 JS 实现待办事项列表，点击“正在进行”任务复选框为什么无法自动分类到“已完成”？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！