如何使用Javascript为待办列表添加标记任务完成的按钮

你当前代码的核心问题是done函数没有实现标记任务完成的逻辑，仅调用了createHtml渲染方法，既没有修改任务的完成状态，也没有给对应DOM添加删除线样式。可按以下方案实现：

实现方案 #

方案1：直接操作DOM即时生效（无需全量重渲染，性能更好） #

直接通过点击事件获取对应任务节点，添加删除线样式，同步修改任务数组状态即可：

function done(e, i) {
  // 找到当前按钮所属的任务节点
  const taskLi = e.currentTarget.closest('li');
  // 添加删除线样式，也可以预定义CSS类切换，更易维护
  taskLi.style.textDecoration = 'line-through';
  // 同步修改你的任务数组对应项的完成状态，替换为你自己的任务数组变量名即可
  taskList[i].isDone = true;
}

方案2：数据驱动渲染（适合需要全局同步状态的场景） #

1. 首先给你的任务数组每个项新增isDone状态字段，默认值为false
2. 修改createHtml渲染逻辑，生成任务节点时判断状态，已完成的任务自动加删除线：

// createHtml 内生成 todoLi 时补充这段逻辑
if (当前任务项.isDone) {
  todoLi.style.textDecoration = 'line-through';
}

3. 重写done函数：

function done(e, i) {
  // 修改对应任务的完成状态，加!可支持切换完成/未完成，不需要直接赋值true即可
  taskList[i].isDone = !taskList[i].isDone;
  // 重新渲染全量列表
  createHtml();
}

优化建议 #

推荐单独定义CSS类控制已完成样式，比行内样式更灵活：

.task-completed {
  text-decoration: line-through;
  opacity: 0.6;
}

需要标记完成时直接调用taskLi.classList.add('task-completed')即可。

内容的提问来源于stack exchange，提问作者fiwi92