Node.js待办列表App：图标（圆圈/已勾选圆圈）切换失效的解决问询

你的图标切换功能失效核心原因有两个：

1. 重复使用唯一ID #

在EJS循环中，每个任务的图标都用了id="hola"，但HTML规范要求ID必须全局唯一。document.getElementById("hola")只能获取页面中第一个带该ID的元素，导致只有第一个任务的图标能响应点击，其他任务完全无效果。

2. 事件绑定覆盖范围不足 #

当前代码仅给单个元素绑定了点击事件，循环生成的其他任务图标并未绑定切换逻辑。

修复步骤 #

第一步：修正HTML中的重复ID

将图标元素的id="hola"替换为类名（比如task-checkbox），同时修正其他重复的ID（edit-func、id_list等，ID不能重复使用）：

<% for (let i of work_list) { %>
  <li class="task-list-item edit-func">
    <p class="id_list"><%= i.list %></p>
    <p><i class="fa-solid fa-calendar-days"></i><span class="id_date"><%=i.date %></span></p>
    <p class="id_category"><%= i.category %></p>
    <a href="/delete-task/?id=<%= i._id %>" ><i class="fa-solid fa-trash delete-icon"></i></a>
    <a href="" class="edit-func"><i class="fa-solid fa-pen edit"></i></a>
    <h1 class="done-task" ><i class="fa-regular fa-circle task-checkbox"></i></h1>
  </li>
<% } %>

第二步：绑定点击事件（两种可选方案）

方案1：事件委托（推荐，支持动态新增任务）

利用事件冒泡特性，给父元素（或document）绑定一次事件，即可处理所有任务图标的点击，效率更高且支持后续动态添加的任务：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('task-checkbox')) {
    const tick = e.target;
    if (tick.classList.contains('fa-circle')) {
      tick.classList.replace('fa-circle', 'fa-circle-check');
    } else {
      tick.classList.replace('fa-circle-check', 'fa-circle');
    }
  }
});

方案2：遍历元素绑定事件（适合静态任务列表）

如果任务列表不会动态新增，可直接遍历所有图标元素绑定点击逻辑：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const ticks = document.querySelectorAll('.task-checkbox');
  ticks.forEach(tick => {
    tick.onclick = function() {
      if (this.classList.contains('fa-circle')) {
        this.classList.replace('fa-circle', 'fa-circle-check');
      } else {
        this.classList.replace('fa-circle-check', 'fa-circle');
      }
    }
  });
});

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