如何通过唯一ID编辑任务？点击编辑按钮无法获取任务ID求助

问题根源 #

1. 选择器匹配错误：编辑按钮用的是id="edit-button"，但事件监听代码里用了类选择器.edit-button查找元素，导致找不到任何按钮。而且多个任务重复使用同一ID违反HTML规范，应该改用class。
2. DOM遍历路径错误：编辑按钮所在的.task-buttons和目标.task-to-do是同级元素（同属.task-flex容器），用editBtn.closest(".task-to-do")无法定位到目标元素，需要先找到共同父容器再查找目标。

修复方案 #

第一步：修改渲染代码的按钮标识

把按钮的id改为class，同时给重复的列表项ID加上任务ID后缀避免冲突：

taskArray.forEach((task) => {
  let divEl = document.createElement("div");
  divEl.classList.add("task-flex");

  divEl.innerHTML = `<div class="task-buttons">
      <img src="./resources/icons/edit.png" class="edit-button" alt="Edit Button"/>
      <img src="./resources/icons/bin.png" class="remove-button" alt="Bin Button" />
      <img src="./resources/icons/completed-task.png" class="complete-button" alt="Complete Task Button" />
    </div>

    <div class="task-to-do" data-id="${task.id}" data-value="${task.timeStamp}">
        <div class="list" id="list-item-date-${task.id}">Due: ${task.date}</div>
        <div class="list" id="list-item-task-${task.id}">${task.task}</div>
    </div>`;

  taskListEl.append(divEl);
});

第二步：修复事件监听逻辑

修正DOM遍历路径，确保能正确获取任务ID：

// 修复后的事件监听
let editBtns = document.querySelectorAll(".edit-button");

editBtns.forEach(editBtn => {
  editBtn.addEventListener("click", (event) => {
    // 先找到共同父容器.task-flex
    let taskFlex = editBtn.closest(".task-flex");
    // 从父容器中定位.task-to-do元素
    let toDoTask = taskFlex.querySelector(".task-to-do");
    let dataId = toDoTask.getAttribute("data-id");
    console.log(`Edit button clicked for task with data-id: ${dataId}`);
  });
});

（推荐）事件委托优化版

如果后续会动态添加任务，直接给每个按钮绑定事件会失效，用事件委托更可靠：

// 绑定到父容器，无需每次渲染后重新绑定事件
taskListEl.addEventListener("click", (event) => {
  if (event.target.classList.contains("edit-button")) {
    let taskFlex = event.target.closest(".task-flex");
    let toDoTask = taskFlex.querySelector(".task-to-do");
    let dataId = toDoTask.getAttribute("data-id");
    console.log(`Edit button clicked for task with data-id: ${dataId}`);
  }
});

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