Estoy construyendo una aplicación ToDo. La función con la que tengo problemas es cuando voy a "Editar" una tarea y al hacer clic en "Entrar", agrega una nueva tarea, en lugar de actualizar la tarea existente.
Simultáneamente, quiero actualizar la Fecha de la tarea en "Editar". Tengo un EventListener vinculado al botón 'Establecer fecha', dentro de mi selector de fechas. Cada vez que se hace clic en 'Establecer fecha', también se agrega una nueva tarea, en lugar de actualizar la fecha.
// 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") })Entonces hago clic en "Editar" en "Tarea 2" y llena el campo de entrada y cambio el nuevo nombre de la tarea a Tarea 12 y presiono "Enter". Después de hacer clic en "Entrar", aparece el selector de fecha y elijo una fecha. Después de hacer clic en "Establecer fecha", en lugar de actualizar la tarea existente, agrega una nueva tarea por completo. Entonces Tarea 1, Tarea 2, Tarea 3 y Tarea 12. En lugar de Tarea 1, Tarea 12, Tarea 3.
En insertDate.addEventListener("clic"...
Siempre toma las entradas y luego agrega una nueva tarea pendiente. Primero debe verificar si está editando actualmente y, si lo está, tome la tarea que está editando y cámbiela en lugar de insertar una nueva en la lista.
se vería algo como esto:
// 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") })