在使用 JavaScript 实现的 TodoList 中，如何正确判断 Checkbox 点击事件，从而归类任务？-css教程-PHP中文网

在使用 JavaScript 实现的 TodoList 中，如何正确判断 Checkbox 点击事件，从而归类任务？

心靈之曲

发布： 2024-10-22 19:15:02

转载

716人浏览过

在使用 javascript 实现的 todolist 中，如何正确判断 checkbox 点击事件，从而归类任务？

使用 javascript 实现 todolist，点击 checkbox 后无法正确归类任务

问题描述：
在使用 javascript 实现的 todolist 中，点击“正在进行”任务中的 checkbox，无法将任务自动归类到“已完成”任务列表。

原因分析：
在提供的代码中，发现有一个单词拼写错误：将 form 写成了 from。

预期结果：
点击“正在进行”列表中的 checkbox，任务应该被移到“已完成”列表中。

立即学习“Java免费学习笔记（深入）”；

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

实际错误信息：
未提供

解决方法：
将代码中的所有 from 全部替换为 form：

// ...
contentdom.addeventlistener("change", (event) => {
  let target = event.target;
  if (target.dataset.form === "todo" && target.tagname === "input") {
    let index = +target.dataset.index;
    // ...
  } else if (target.dataset.form === "done" && target.tagname === "input") {
    let index = +target.dataset.index;
    // ...
  }
});

contentdom.addeventlistener("click", (event) => {
  let target = event.target;
  if (target.dataset.form === "todo" && target.tagname === "img") {
    let index = +target.dataset.index;
    // ...
  } else if (target.dataset.form === "done" && target.tagname === "img") {
    let index = +target.dataset.index;
    // ...
  }
});
// ...

登录后复制

修正后的代码：

let data = {
  todoArr: [],
  doneArr: [],
};

function main() {
  let storage = localStorage.getItem("todo");
  if (storage !== null) {
    data = JSON.parse(storage);
    render(data);
  }

  // ...

  // 获取容器 DOM
  let contentDom = document.getElementById("content");

  // ...

  contentDom.addEventListener("change", (event) => {
    let target = event.target;
    if (target.dataset.form === "todo" && target.tagName === "INPUT") {
      let index = +target.dataset.index;
      // ...
    } else if (target.dataset.form === "done" && target.tagName === "INPUT") {
      let index = +target.dataset.index;
      // ...
    }
  });

  contentDom.addEventListener("click", (event) => {
    let target = event.target;
    if (target.dataset.form === "todo" && target.tagName === "IMG") {
      let index = +target.dataset.index;
      // ...
    } else if (target.dataset.form === "done" && target.tagName === "IMG") {
      let index = +target.dataset.index;
      // ...
    }
  });
}

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

// ...

登录后复制

以上就是在使用 JavaScript 实现的 TodoList 中，如何正确判断 Checkbox 点击事件，从而归类任务？的详细内容，更多请关注php中文网其它相关文章！