JavaScript待办APP编辑按钮替换新值功能开发求助

现有代码核心问题 #

• 作用域错误：editButton定义在表单提交的回调函数内，属于局部变量，全局声明的editing函数无法访问该变量，点击按钮时会直接抛出变量未定义的报错
• DOM操作逻辑错误：直接将整个<li>条目替换为input元素，会把条目内的删除、编辑按钮一并删除，后续无法进行保存、删除操作
• 逻辑缺失：没有区分「待编辑」和「编辑中」两种状态，没有编写保存修改后将输入框换回普通文本的逻辑，输入框也没有默认填充原有待办内容
• 无效属性：给<li>标签设置li="readonly"属性没有任何作用，readonly是表单输入元素的专属属性，列表标签不支持该属性

实现逻辑 #

编辑功能只需要操作待办条目的文本部分，不需要动整个列表项，按以下步骤实现即可：

• 新增待办时，把待办文本单独放在<span>标签内，再追加删除、编辑按钮，避免后续取文本时把按钮上的文字一起获取到
• 点击编辑按钮时先判断当前状态：
  • 按钮文字为EDIT时：创建输入框，输入框默认值填充原有待办内容，用输入框替换掉存放文本的span标签，把按钮文字改为Save，自动聚焦到输入框优化体验
  • 按钮文字为Save时：获取输入框的内容做非空校验，把新内容写回span标签，用span替换掉输入框，把按钮文字改回EDIT

修正后完整代码 #

JavaScript部分 #

const addButton = document.querySelector('#addButton');
const inputTask = document.querySelector('#inputTask');
const taskList = document.querySelector('#taskList');
const form = document.querySelector('#taskForm');

form.addEventListener('submit', function(e){
    e.preventDefault();
    const task = inputTask.value.trim();
    if (!task) {
        alert('Please write down a task');
        return;
    }
    const newLi = document.createElement('li');
    // 单独用span存放待办文本，避免和按钮文字混淆
    const taskSpan = document.createElement('span');
    taskSpan.textContent = task;
    newLi.appendChild(taskSpan);
    taskList.append(newLi);
    
    // 删除按钮
    const deleteButton = document.createElement('button')
    deleteButton.innerText = "delete";
    newLi.appendChild(deleteButton);
    deleteButton.addEventListener('click', deleting)

    // 编辑按钮
    const editButton = document.createElement('button');
    editButton.innerText= "EDIT";
    newLi.appendChild(editButton);
    editButton.addEventListener('click', editing);
    
    inputTask.value = "" ; 
});

// 删除功能
function deleting(){
    let forDelete = this.parentElement
    taskList.removeChild(forDelete);
};

// 编辑功能
function editing() {
    const currentBtn = this;
    const parentLi = currentBtn.parentElement;
    // 判断当前是编辑状态还是保存状态
    if (currentBtn.textContent === 'EDIT') {
        const taskSpan = parentLi.querySelector('span');
        const editInput = document.createElement('input');
        editInput.type = 'text';
        editInput.value = taskSpan.textContent;
        // 用输入框替换文本节点
        parentLi.replaceChild(editInput, taskSpan);
        currentBtn.textContent = 'Save';
        editInput.focus();
    } else {
        const editInput = parentLi.querySelector('input');
        const newTaskValue = editInput.value.trim();
        if (!newTaskValue) {
            alert('待办内容不能为空');
            return;
        }
        const taskSpan = document.createElement('span');
        taskSpan.textContent = newTaskValue;
        // 用新的文本节点替换输入框
        parentLi.replaceChild(taskSpan, editInput);
        currentBtn.textContent = 'EDIT';
    }
}

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</title>
  </head>
  <body>
    <h1>To-DO</h1>
    <form id="taskForm">
      <input type="text" placeholder="Write a task..." id="inputTask" />
      <input type="submit" value="Add" id="addButton" />
    </form>
    <ol id="taskList">
      TASKS
    </ol>
    <script src="script.js"></script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Taxiarchis Ch.