Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

43
Vistas
I want to add new tasks and edit them. When I try to update 1 task, all tasks for which edit icon was clicked previously are getting updated. Why so?
  1. saveButton has 2 event handlers for "click", 1 for update, 1 for adding new task
  2. editThis() is event handler to edit icon, it copies selected task details to input fields in order to take update. saveButton is attached with anonymous event handler which saves the update in localStorage,UI
  3. Issues all tasks for which "edit icon" was clicked are getting updated instead of 1 and new task is also getting added in addition to updation.
/* default value is 0, indicates that new task should be added when saveButton is clicked */
let currentOperation = 0;
function editThis(event) {
    currentOperation = 1;
    let saveButton = document.getElementsByClassName("form__submit")[0];

    // this variable is used to identify which task needs to be updated
    let currentItemId = event.target.parentNode.dataset.dataId;

    // each task is stored in localStorage as task[i]= JSONObject.stringify()
    let selectedTask = JSON.parse(localStorage.getItem("task[" + currentItemId + "]"));

    // task details are transferred to input fields to edit
    inputs[0].value = selectedTask.title;
    inputs[1].value = selectedTask.date;
    inputs[2].value = selectedTask.status;

    saveButton.addEventListener("click", function() {
        if (currentOperation == 1) {
            //inputs[x] = document.getElementsByClassName("input")[x]
            let updatedObject = { title: inputs[0].value, date: inputs[1].value, status: inputs[2].value };
            localStorage.setItem("task[" + currentItemId + "]", JSON.stringify(updatedObject));
            document.getElementsByClassName("todo-container")[currentItemId].firstChild.nodeValue = updatedObject.title + " " + updatedObject.date + " " + updatedObject.status;// .todo-container has 2 children nodes, 1st contains task details and 2nd contains edit icon to which editThis event handler is attached

            setTimeout(function () { currentOperation = 0; }, 20000);
        }
    });
}

This image shows placement edit icon,saveButton,todo-container

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos