通过dom实现js todolist，无法将任务自动归类到“已完成”
问题描述：
在进行的任务选中checkbox后，无法自动归类到已完成，而是直接移除了。
尝试过的解决方法：
尝试移除css文件，以排除css样式影响。
问题复现代码：
HTML：
// 主页...... 正在进行
已经完成
登录后复制
JS：
// 获取容器DOMlet 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，任务选中后无法自动归类到已完成，问题出在哪里？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2808669.html
