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

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《在使用 JavaScript 实现的 TodoList 中，如何正确判断 Checkbox 点击事件，从而归类任务？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

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

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

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

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

实际错误信息：
未提供

解决方法：
将代码中的 所有 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 点击事件，从而归类任务？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！