更新現有任務而不是添加新任務（待辦事項列表應用程序）

Question

我正在構建一個 ToDo 應用程序。 我遇到的問題是當我去“編輯”一個任務並單擊“Enter”時，它會添加一個新任務，而不是更新現有任務。

同時，我想在“編輯”中更新任務的日期。 我的日期選擇器內有一個與“設置日期”按鈕綁定的 EventListener。 每次單擊“設置日期”時，它還會添加一個新任務，而不是更新日期。

// edit task function
function editTask(taskId, taskName) {
    editId = taskId;
    isEditedTask = true;
    taskInput.value = taskName;
    element.classList.add("show__date")
}   

// enter feature 
taskInput.addEventListener("keyup", e => {
    let userTask = taskInput.value.trim();
    if(e.key == "Enter" && userTask ) {
        // alert(When Is This Task Due? 😁")
        element.classList.add("show__date");
    } document.addEventListener("click", () => {
        // removing show class from the task menu on the document click
        if(e.target !== insertDate) {
            element.classList.remove("show__date"); 
        }
    });
})

// set date feature 
insertDate.addEventListener("click", () => {
    if (dateSelect.value.length !== "") { // checking to see if .date__wrapper input 
field is empty
        element.classList.remove("show__date"); // removing datepicker, if field is 
not empty after clicking button
        let userTask = taskInput.value.trim();
        let dueDate = dateSelect.value.trim(); 
        let taskInfo = {name: userTask, status: "pending", date: dueDate};
        todos.push(taskInfo); // adding new task to todos
    }
    // else if (!isEditedTask) {
    //     if(!todos) { //if todos doesn't exist, pass an empty array to todos
    //         todos = [];
    //         }
    // }
    localStorage.setItem("todo__list", JSON.stringify(todos));
    showTodo(); //displays new task inside the task menu once enter is keyed
    showTodo("all")
})

所以我在“任務 2”上單擊“編輯”，它會填充輸入字段，我將新任務名稱更改為任務 12，然后按“Enter”。 單擊“Enter”后，日期選擇器顯示，我選擇了一個日期。 單擊“設置日期”后，它不會更新現有任務，而是完全添加一個新任務。 所以任務 1、任務 2、任務 3 和任務 12。而不是任務 1、任務 12、任務 3。

Answer 1

在 insertDate.addEventListener("click"...

你總是接受輸入，然后添加一個新的待辦事項。 您應該首先檢查您當前是否正在編輯，如果是，請獲取您正在編輯的待辦事項並更改它，而不是在列表中推送新的待辦事項。

它看起來像這樣：

// set date feature 
insertDate.addEventListener("click", () => {
    if (dateSelect.value.length !== "") { // checking to see if .date__wrapper input 
field is empty
        element.classList.remove("show__date"); // removing datepicker, if field is not empty after clicking button
        let userTask = taskInput.value.trim();
        let dueDate = dateSelect.value.trim(); 
        
        if (editId) {
            const todo = todos.find(todo => todo.id === editId);
            todo.name = userTask;
            todo.date = dueDate
        } else {
            let taskInfo = {name: userTask, status: "pending", date: dueDate};
            todos.push(taskInfo); // adding new task to todos
        }
    }
    // else if (!isEditedTask) {
    //     if(!todos) { //if todos doesn't exist, pass an empty array to todos
    //         todos = [];
    //         }
    // }
    localStorage.setItem("todo__list", JSON.stringify(todos));
    showTodo(); //displays new task inside the task menu once enter is keyed
    showTodo("all")
})