Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

273
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!