Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

270
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda