javascript 中使用 dom 更新 todolist
在您的问题中，您遇到了在使用 javascript 通过 dom 更新 todolist 时遇到困难的问题。具体来说，您无法将“正在进行”的任务移动到“已完成”部分。
问题原因
在您提供的 javascript 代码中，拼写错误导致“正在进行”任务无法移动到“已完成”部分。您在事件侦听器和数据属性中拼写了“form”而不是“from”。
立即学习“Java免费学习笔记（深入）”；
解决方案
将代码中的所有“form”拼写替换为“from”。修改后的代码如下：
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]; // 添加到已完成 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); }});
更新后的代码示例
修改后的代码如下：
let data = { todoArr: [], doneArr: [],};function main() { let storage = localStorage.getItem("todo"); if (storage !== null) { data = JSON.parse(storage); render(data); } // 获取按钮 DOM let addBtn = document.getElementById("add-btn"); // 获取 input DOM let titleInput = document.getElementById("title"); // 为按钮增加 click 事件监听 addBtn.addEventListener("click", (event) => { if (titleInput.value) { data.todoArr.push(titleInput.value); render(data); titleInput.value = ""; } }); // 获取容器 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]; // 添加到已完成 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); } }); // 通过事件代理的方式，监听 tag 派发的 click 事件 contentDom.addEventListener("click", (event) => { let target = event.target; if (target.dataset.from === "todo" && target.tagName === "IMG") { let index = +target.dataset.index; data.todoArr.splice(index, 1); render(data); } else if (target.dataset.from === "done" && target.tagName === "IMG") { let index = +target.dataset.index; data.doneArr.splice(index, 1); render(data); } });}let imgSrc = "https://ts1.cn.mm.bing.net/th/id/R-C.f1d02b4e59751fba384245ebf3c42688?rik=xMnkkxisjTQERA&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_513596.png&ehk=gUYMqjE9AcyrMbJullahgYyLu0QYUGZPs0Gm%2f8%2bn4Nc%3d&risl=&pid=ImgRaw&r=0&";function render(data) { localStorage.setItem("todo", JSON.stringify(data)); // 先清空内容 let todoContainer = document.getElementById("todoList"); todoContainer.innerHTML = ""; let doneContainer = document.getElementById("doneList"); doneContainer.innerHTML = ""; // 直接拼接 HTML let todoArr = data.todoArr; let todoHTML = ""; for (let i = 0, len = todoArr.length; i < len; i++) { todoHTML += ` 其他建议
如果您遇到类似问题，请尝试以下步骤：
仔细检查您的代码中是否有拼写错误或语法错误。使用调试器或 console 日志来帮助您跟踪代码中的执行流程。将您的代码分解成较小的块，这样更容易识别和隔离问题。寻求来自其他开发人员的帮助或在在线论坛上发布问题。
以上就是在 JavaScript 中移动 TodoList 中的“正在进行”任务如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630362.html
微信扫一扫 
支付宝扫一扫 
