JavaScript待办清单：点击div为指定任务添加删除线失败求助

你的代码主要有两个问题：

• 点击事件触发时，你操作的是整个任务容器#text，而不是被点击的单个待办项
• strike()是已废弃的DOM方法，现在推荐用CSS样式实现删除线效果

下面是修改后的完整代码，同时支持点击切换删除线（点一下加删除线，再点一下取消）：

修改后的JavaScript代码 #

function displayText() {
  let input = document.getElementById("textBar");
  let toDoContainer = document.getElementById("text");
  
  // 用margin-bottom替代多个br，样式更易维护
  toDoContainer.innerHTML += `<div class='toDo' onclick='crossOut(event)'>${input.value}</div>`;
  input.value = "";
}

function crossOut(event) {
  // 获取被点击的具体待办项元素
  const clickedItem = event.target;
  // 切换CSS类来控制删除线显示/隐藏
  clickedItem.classList.toggle("completed");
}

修改后的CSS代码 #

.toDo {
  cursor: pointer;
  margin-bottom: 16px; /* 控制待办项之间的间距 */
}

/* 新增已完成任务的样式 */
.completed {
  text-decoration: line-through;
  color: #999; /* 可选：给已完成任务加灰色，视觉区分更明显 */
}

修改后的HTML代码（原结构无需改动） #

<div id="container">
  <div id="today">Today is:</div>
  <br>
  <div id="date"></div>

  <input type="text" placeholder="Enter task" id="textBar">
  <button type="submit" id="submit" onclick="displayText()">Add</button>

  <div id="text">
    <!--<div class="toDo" onclick="crossOut()">Design Text</div>-->
  </div>
</div>

关键改动说明： #

1. 传递点击事件：在onclick='crossOut(event)'里把点击事件对象传给函数，精准定位被点击的待办项
2. CSS类切换状态：通过classList.toggle("completed")实现删除线的添加/移除，比直接操作元素样式更易维护，还支持切换效果
3. 规范间距控制：用CSS的margin-bottom替代多个硬编码的<br>，符合前端样式与结构分离的规范

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