如何修改JavaScript待办项编辑函数仅替换目标元素而非全部？

原代码的核心问题 #

1. 每次点击编辑图标时，都会给提交按钮重复绑定点击事件，多次点击编辑后，提交一次会触发多次替换操作
2. 提交逻辑中遍历所有.todos元素并替换文本，这就是所有待办项被批量修改的原因

修复后的代码 #

const editButtons = Array.from(document.getElementsByClassName("fa fa-edit"));
const submitBtn = document.getElementById("submit");
const myInput = document.getElementById("myinput");
let currentTodoElement = null; // 存储当前选中的待办项元素

// 绑定编辑按钮点击事件
editButtons.forEach(btn => {
  btn.addEventListener("click", function() {
    // 定位到当前要编辑的待办项元素
    currentTodoElement = this.parentElement.previousElementSibling;
    // 填充输入框并聚焦
    myInput.value = currentTodoElement.textContent;
    myInput.focus();
  });
});

// 仅绑定一次提交按钮的点击事件
submitBtn.addEventListener("click", function() {
  // 确认有选中的待办项才执行修改
  if (currentTodoElement) {
    currentTodoElement.textContent = myInput.value;
    // 重置状态，避免后续误操作
    myInput.value = "";
    currentTodoElement = null;
  }
});

关键改动说明 #

• 提前缓存输入框元素，减少重复DOM查询
• 新增currentTodoElement变量，专门记录当前要编辑的目标元素，提交时直接操作该元素，而非遍历所有待办项
• 将提交按钮的事件绑定移到编辑按钮循环外部，彻底避免重复绑定问题
• 提交完成后清空输入框和目标元素引用，防止用户误触提交导致意外修改

内容的提问来源于stack exchange，提问作者Jaya Prasthika Prabhuram