求助：为购物清单编辑按钮添加点击编辑并保存修改功能

我需要为购物清单的编辑按钮添加点击事件，实现编辑列表项并保存修改的功能。经过查找资料后，我仍不知从何入手，之前尝试的代码已删除。我的删除按钮功能完全正常，原本以为if else语句可行，但没有得到预期结果。现有代码如下：

//create form

const form = document["addItem"]
const div = document.querySelector('#todos')
const ul = document.querySelector('#list');

form.addEventListener("submit", (e) => {
 e.preventDefault();
    // addItem event handler for submit event on submit
      const typedInput = document.getElementById("title").value
      console.log(typedInput) 
      const list = document.getElementById("list")
      document.addEventListener("click", addItem);
      
      
      // created elements and appended to list to display on the website
      const div = document.createElement("div")
      const ul = document.createElement("list");
      const li = document.createElement("li");
      div.appendChild(document.createTextNode(typedInput));
      ul.appendChild(li);
      li.appendChild(div);
      // added button to represent the edit button when clicked
      const button = document.createElement("button");
      button.name = "edit";
      li.appendChild(button).textContent = "edit"
      
// added newButton to store delete button, appended to the parentElement to remove the list item
//after submission
      const newButton = document.createElement("button");
      newButton.name = "removeItem";
      li.appendChild(newButton).textContent = "X"
      document.getElementById('list').appendChild(li);
      newButton.addEventListener("click", function(){
          this.parentNode.remove();
      })
     })

编辑功能实现方案 #

直接给编辑按钮绑定点击事件，通过切换元素状态完成编辑/保存逻辑：

1. 点击「edit」时，把显示文本的<div>替换为预填当前内容的输入框，同时按钮文字改成「保存」
2. 点击「保存」时，把输入框的值同步回<div>，再换回显示状态，按钮改回「edit」

修改后的完整代码：

//create form

const form = document["addItem"];
const div = document.querySelector('#todos');
const ul = document.querySelector('#list');

form.addEventListener("submit", (e) => {
 e.preventDefault();
      const typedInput = document.getElementById("title").value;
      const list = document.getElementById("list");
      
      // 创建元素并添加到列表
      const textDiv = document.createElement("div"); // 重命名变量避免全局冲突
      const li = document.createElement("li");
      textDiv.textContent = typedInput; // 简化文本赋值方式
      li.appendChild(textDiv);
      
      // 编辑按钮
      const editBtn = document.createElement("button");
      editBtn.name = "edit";
      editBtn.textContent = "edit";
      li.appendChild(editBtn);
      
      // 删除按钮
      const deleteBtn = document.createElement("button");
      deleteBtn.name = "removeItem";
      deleteBtn.textContent = "X";
      li.appendChild(deleteBtn);
      
      list.appendChild(li);
      
      // 删除按钮逻辑保留
      deleteBtn.addEventListener("click", function(){
          this.parentNode.remove();
      });

      // 编辑按钮核心逻辑
      editBtn.addEventListener("click", function() {
          if (this.textContent === "edit") {
              // 切换到编辑状态：生成输入框替换文本div
              const input = document.createElement("input");
              input.type = "text";
              input.value = textDiv.textContent;
              li.replaceChild(input, textDiv);
              this.textContent = "保存";
          } else {
              // 切换到保存状态：把输入值同步回div，换回显示状态
              const input = li.querySelector("input");
              textDiv.textContent = input.value;
              li.replaceChild(textDiv, input);
              this.textContent = "edit";
          }
      });
 });

额外优化说明 #

• 删掉了原代码中多余且错误的<ul>创建代码，页面已有#list元素无需重复创建
• 优化变量命名（如button→editBtn），避免混淆
• 移除了无定义的document.addEventListener("click", addItem);，避免报错

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