Kanban Board开发问题：编辑/删除图标点击事件功能异常

问题描述 #

开发类Kanban Board应用时，遇到图标点击功能异常：

• 点击edit图标无法激活对应input输入框进行编辑
• 点击delete图标无法删除对应任务

代码实现 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To-Do List - Manage your tasks easily</title>
    <link rel="stylesheet" href="css/all.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <header><h1 class="text-center fw-bold">To Do List</h1></header>
    <main>
      <div class="container">
        <div class="row gap-5">
          <div
            class="section-container w-auto d-flex flex-column align-items-center col-sm-12 col-md-6 col-lg-4 mb-3"
          >
            <h3 class="align-self-start fw-bold">
              Not Started <i class="fa-regular fa-circle"></i>
            </h3>
            <div class="task-list mb-2"></div>
            <button class="add fw-bold rounded w-100 border-0">+ Add</button>
          </div>
          <div
            class="section-container w-auto d-flex flex-column align-items-center col-sm-12 col-md-6 col-lg-4 mb-3"
          >
            <h3 class="align-self-start fw-bold">
              In Progress <i class="fa-solid fa-circle-half-stroke"></i>
            </h3>
            <div class="task-list mb-2"></div>
            <button class="add fw-bold rounded w-100 border-0">+ Add</button>
          </div>
          <div
            class="section-container w-auto d-flex flex-column align-items-center col-sm-12 col-md-6 col-lg-4 mb-3"
          >
            <h3 class="align-self-start fw-bold">
              Completed <i class="fa-regular fa-circle"></i>
            </h3>
            <div class="task-list mb-2"></div>
            <button class="add fw-bold rounded w-100 border-0">+ Add</button>
          </div>
        </div>
      </div>
    </main>
    <footer class="d-flex justify-content-center">
      <span class="footer"
        >Coded with 🖤 By
        <a
          href="https://www.linkedin.com/in/mohamed-elmasry8822"
          target="_blank"
          >Mohamed Yasser</a
        ></span
      >
    </footer>
    <script src="js/main.js"></script>
    <script src="js/all.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>

CSS代码 #

* {
  box-sizing: border-box;
}
body {
  font-family: Tahoma, Arial;
  background-color: #aed9e0;
}
h1 {
  margin: 6rem auto;
  color: #333;
}
.row {
  justify-content: center;
}
.section-container h3 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
}
.section-container h3 svg {
  color: #1976d2;
}
.section-container .task-list {
  min-height: 2rem;
  min-width: 271px;
}

.section-container .task-list .task-item {
  background-color: #f5f5f5;
  padding-right: 10px;
}

.section-container .task-list .task-item input {
  cursor: move;
  padding: 5px 10px;
  background-color: #f5f5f5;
  color: #333;
}
.section-container .task-list .task-item input.disabled {
  pointer-events: none;
}
.section-container .task-list .task-item input:focus {
  outline: none;
}
.section-container .task-list .task-item .edit-button {
  color: #1976d2;
  opacity: 50%;
  transition: opacity 0.3s;
}
.section-container .task-list .task-item .edit-button:hover {
  opacity: 1;
}
.section-container .task-list .task-item .delete-button {
  color: #ff5c5c;
  opacity: 50%;
  transition: opacity 0.3s;
  margin-left: 10px;
}
.section-container .task-list .task-item .delete-button:hover {
  opacity: 1;
}
.section-container .add {
  background-color: #4caf50;
  font-size: 14px;
}
footer {
  margin: 10rem 0rem 3rem;
}
@media (max-width: 767px) {
  footer {
    margin: 4rem 0rem 3rem;
  }
}
.footer a {
  text-decoration: none;
  color: #2f6e31;
  transition: color 0.3s;
}
.footer a:hover {
  color: #4caf50;
}

JavaScript代码 #

const taskLists = document.querySelectorAll(".task-list");
const addButtons = Array.from(document.querySelectorAll(".add"));

function addTask() {
  const task = document.createElement("div");
  task.classList.add(
    "task-item",
    "mb-2",
    "rounded",
    "overflow-hidden",
    "d-flex",
    "align-items-center"
  );

  const taskName = document.createElement("input");
  taskName.classList.add("border-0", "disabled", "flex-grow-1");
  taskName.type = "text";
  taskName.value = "New Task";

  const editIcon = document.createElement("i");
  editIcon.classList.add("fa-regular", "fa-pen-to-square", "edit-button");
  editIcon.addEventListener("click", () => {
    input.classList.remove("disabled");
    input.focus();
  });

  const deleteIcon = document.createElement("i");
  deleteIcon.classList.add("fa-regular", "fa-trash-can", "delete-button");
  deleteIcon.addEventListener("click", () => {
    task.remove();
  });

  task.appendChild(taskName);
  task.appendChild(editIcon);
  task.appendChild(deleteIcon);

  return task;
}

addButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const task = addTask();
    button.previousElementSibling.appendChild(task);
  });
});

问题原因及修复方案 #

核心问题 #

JavaScript代码中，编辑图标的点击事件里使用了未定义的input变量，实际创建的输入框变量名为taskName，导致点击edit图标时控制台报错，脚本执行中断，进而影响删除功能的正常运行。

修复步骤 #

1. 修正编辑事件的变量名：将edit图标点击事件中的input改为taskName
2. 优化编辑体验（可选）：添加输入框失去焦点时重新禁用的逻辑，避免输入框一直处于可编辑状态

修复后的addTask函数代码：

function addTask() {
  const task = document.createElement("div");
  task.classList.add(
    "task-item",
    "mb-2",
    "rounded",
    "overflow-hidden",
    "d-flex",
    "align-items-center"
  );

  const taskName = document.createElement("input");
  taskName.classList.add("border-0", "disabled", "flex-grow-1");
  taskName.type = "text";
  taskName.value = "New Task";

  const editIcon = document.createElement("i");
  editIcon.classList.add("fa-regular", "fa-pen-to-square", "edit-button");
  editIcon.addEventListener("click", () => {
    taskName.classList.remove("disabled");
    taskName.focus();
  });

  // 可选：失去焦点时重新禁用输入框
  taskName.addEventListener("blur", () => {
    taskName.classList.add("disabled");
  });

  const deleteIcon = document.createElement("i");
  deleteIcon.classList.add("fa-regular", "fa-trash-can", "delete-button");
  deleteIcon.addEventListener("click", () => {
    task.remove();
  });

  task.appendChild(taskName);
  task.appendChild(editIcon);
  task.appendChild(deleteIcon);

  return task;
}

验证效果 #

修复后：

• 点击edit图标，对应输入框会移除disabled类并自动获取焦点，可正常编辑
• 点击delete图标，对应任务项会被删除
• 输入框失去焦点后会重新变为不可编辑状态（可选优化）

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