Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

272
Vistas
Actualizar una tarea existente en lugar de agregar una nueva tarea (aplicación ToDo List)

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

Foto de la aplicación

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.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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") })
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda