编辑字段未替换旧值？编辑函数无法保存新值问题求助

问题核心 #

编辑模态框可正常显示，但提交时存在以下问题：

• 若更新后的文本为空，无法完成保存
• 即使尝试更新数组对象并渲染DOM，新值始终被识别为空，最终保存失败

复现步骤 #

• 创建新任务
• 点击编辑按钮打开模态框
• 修改文本内容和日期
• 点击提交按钮
• 观察到数组内任务对象的新值为空，DOM更新后任务和日期也显示为空

问题代码片段 #

function editTask(id) {
  let taskIndex = taskArray.findIndex((task) => task.id === id);
  let taskElement = document.querySelector(`.task-to-do[data-id="${id}"]`);

  let Editedmodal = document.querySelector("#edit-modal");
  let EditedInputTask = document.querySelector("#edit-task");
  let EditedInputDate = document.querySelector("#edit-duedate");

  EditedObject = {
    EditTask: taskArray[taskIndex].task,
    Editdate: taskArray[taskIndex].date
  }

  Editedmodal.style.display = "grid";
  /*Submit Edited task Form*/
  EditedsubmitForm.addEventListener("click", (e) => {

    EditedInputTask.value = EditedObject.editTask;
    EditedInputDate.value = EditedObject.Editdate;
    /*Form Validaion*/
    if (!EditedInputTask.value) {
      EditedInputNoTask.style.display = "block";
      EditedInputTask.style.marginTop = "-1em";
      timeout = setTimeout(() => {
        EditedInputNoTask.style.display = "none";
        EditedInputTask.style.marginTop = "0";
      }, 3000);
    }

    if (!EditedInputDate.value) {
      EditedInputNoDate.style.display = "block";
      EditedInputDate.style.marginTop = "-1em";

      timeout = setTimeout(() => {
        EditedInputNoDate.style.display = "none";
        EditedInputDate.style.marginTop = "0";
      }, 3000);
    } else {
      Editedmodal.style.display = "none";
      EditedInputTask.value = "";
      EditedInputDate.value = "";
    }

    taskArray[taskIndex].task = EditedInputTask.value;
    taskArray[taskIndex].date = EditedInputDate.value;

    taskElement.querySelector("#list-item-date").textContent = `Due: ${taskArray[taskIndex].date}`;
    taskElement.querySelector("#list-item-task").textContent = taskArray[taskIndex].task;
    
    renderTask();
    storeTaskArrayLocally();

    console.log(EditedObject)

  });
}

问题分析与修复方案 #

1. 赋值顺序完全颠倒 #

点击提交时，你先把旧值（EditedObject）赋值给输入框，直接覆盖了用户刚输入的新内容，导致后续获取的输入值都是旧值，甚至清空后变成空。正确逻辑是打开模态框时把旧值填入输入框，提交时读取用户输入的新值。

2. 对象属性大小写不匹配 #

EditedObject定义的属性是EditTask（大写E），但提交时用的是EditedObject.editTask（小写e），这会导致赋值失败，输入框被设为undefined，触发空值校验。

3. 逻辑分支错误 #

只有日期不为空时才关闭模态框并清空输入，但不管校验是否通过，都会执行数组更新和DOM渲染，导致空值被保存。需要在所有校验通过后才执行保存逻辑。

4. 重复绑定事件监听 #

每次点击编辑按钮都会给EditedsubmitForm添加新的点击事件，多次编辑后会触发多次逻辑，导致数据混乱。建议在打开模态框前先移除旧的监听，或者用事件委托。

修复后的代码 #

function editTask(id) {
  let taskIndex = taskArray.findIndex((task) => task.id === id);
  let taskElement = document.querySelector(`.task-to-do[data-id="${id}"]`);

  let Editedmodal = document.querySelector("#edit-modal");
  let EditedInputTask = document.querySelector("#edit-task");
  let EditedInputDate = document.querySelector("#edit-duedate");

  // 打开模态框时填入旧值，而非提交时覆盖新输入
  EditedInputTask.value = taskArray[taskIndex].task;
  EditedInputDate.value = taskArray[taskIndex].date;

  Editedmodal.style.display = "grid";

  // 封装提交逻辑，方便移除监听
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止默认提交行为（若为表单元素）
    let isValid = true;

    /*Form Validation*/
    if (!EditedInputTask.value.trim()) {
      EditedInputNoTask.style.display = "block";
      EditedInputTask.style.marginTop = "-1em";
      setTimeout(() => {
        EditedInputNoTask.style.display = "none";
        EditedInputTask.style.marginTop = "0";
      }, 3000);
      isValid = false;
    }

    if (!EditedInputDate.value) {
      EditedInputNoDate.style.display = "block";
      EditedInputDate.style.marginTop = "-1em";
      setTimeout(() => {
        EditedInputNoDate.style.display = "none";
        EditedInputDate.style.marginTop = "0";
      }, 3000);
      isValid = false;
    }

    // 校验通过才执行保存
    if (isValid) {
      Editedmodal.style.display = "none";
      // 更新数组数据
      taskArray[taskIndex].task = EditedInputTask.value.trim();
      taskArray[taskIndex].date = EditedInputDate.value;
      // 更新DOM显示
      taskElement.querySelector("#list-item-date").textContent = `Due: ${taskArray[taskIndex].date}`;
      taskElement.querySelector("#list-item-task").textContent = taskArray[taskIndex].task;
      // 持久化并重新渲染
      storeTaskArrayLocally();
      renderTask();
      // 清空输入框
      EditedInputTask.value = "";
      EditedInputDate.value = "";
      // 移除监听，避免重复绑定
      EditedsubmitForm.removeEventListener("click", handleSubmit);
    }
  };

  EditedsubmitForm.addEventListener("click", handleSubmit);
}

额外优化建议 #

• 给EditedObject加上let或const声明，避免全局变量污染
• 空值校验时使用trim()过滤空格，避免用户输入空白字符被判定为有效内容

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