更新现有任务而不是添加新任务（待办事项列表应用程序）

Question

I'm building a ToDo app. The feature I'm having issue with is when I go to "Edit" a task and upon clicking "Enter", it adds a New Task, rather than updating the existing task.

Simultaneously, I want to update the Date of the task in "Edit". I have an EventListener tied to 'Set Date' button, inside of my datepicker. Each time the 'Set Date' is clicked, it also adds a New Task, rather than updating the date.

// 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")
})

So I click "Edit" on "Task 2" and it fills the input field and I change the new task name to Task 12 and press "Enter". After clicking "Enter", the datepicker shows and I choose a date. After clicking "Set Date", instead of updating the existing task, it adds a new task entirely. So Task 1, Task 2, Task 3, and Task 12. Instead of Task 1, Task 12, Task 3.

Answer 1

In the insertDate.addEventListener("click"...

You always take the inputs and then add a new todo. You should first check if you are currently editing and if you are, take the todo you are editing and change it instead of pushing a new one in the list.

it would look something like this:

// 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")
})