编辑字段没有替换旧值？

Question

为什么我的编辑功能无法保存新的文本和日期值？目前，该函数显示编辑模式，但如果文本为空，则无法提交更新的文本。尽管更新了数组中的对象并将其呈现在 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)

  });

Answer 1

由于您更新

taskArray

中的任务值的时间安排，您的代码可能会遇到问题。您当前正在更新它们，然后再验证输入字段是否为空。

要解决此问题，我建议将任务更新移至

else

块内，您将在其中检查两个输入字段是否不为空。这样，您就可以确保任务值仅在必要时更新。

EditedsubmitForm.addEventListener("click", (e) => {
  EditedInputTask.value = EditedObject.editTask;
  EditedInputDate.value = EditedObject.Editdate;
  
  /*Form Validation*/
  if (!EditedInputTask.value) {
    // Validation for task input field
  }

  if (!EditedInputDate.value) {
    // Validation for date input field
  } else {
    // If both input fields are not empty
    Editedmodal.style.display = "none";
    EditedInputTask.value = "";
    EditedInputDate.value = "";

    // Update task values in taskArray
    taskArray[taskIndex].task = EditedInputTask.value;
    taskArray[taskIndex].date = EditedInputDate.value;

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