使用 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 实现待办事项列表，点击“正在进行”任务复选框为什么无法自动分类到“已完成”？的详细内容，更多请关注其它相关文章！