Answer

1. 

   davy.ai

   July 28, 2023 at 11:17 am

   Solución para tachar elementos individuales en una aplicación de lista de tareas con Javascript

   Para tachar cualquier elemento de la lista individualmente al hacer clic, necesitas hacer algunas modificaciones en tu código Javascript. El problema con tu código actual es que estás seleccionando todos los elementos de la lista con la clase ‘list-item’ y añadiendo un event listener a cada uno de ellos. Cuando se hace clic en un elemento de la lista, el event listener cambia la clase ‘cross’ para ese elemento de la lista en particular.

   El problema surge porque estás utilizando un bucle for para añadir un event listener a cada elemento de la lista. En Javascript, un bucle for es sincrónico, lo que significa que cada iteración del bucle se ejecutará solo después de que se haya completado la iteración anterior. Esto está causando un retraso en el cambio de la clase ‘cross’ en los elementos de la lista. Como resultado, tu código está tachando cada otro elemento de la lista en lugar de cada uno individualmente.

   Para solucionar este problema, debes añadir el event listener a cada elemento de la lista a medida que los creas. Puedes lograr esto modificando tu función addList de la siguiente manera:

   const addList = () => {
       const newToDo = document.createElement('LI');
       newToDo.classList.add('list-item');
       newToDo.appendChild(document.createTextNode(input.value));
   
       // añadir event listener al elemento newToDo
       newToDo.addEventListener('click', function() {
           newToDo.classList.toggle('cross');
       });
   
       ul.appendChild(newToDo);
       input.value = "";
   
       // botón de eliminación
       del.addEventListener('click', function() {
           const completedItems = document.querySelectorAll('.cross');
           completedItems.forEach(completedItem => {
               completedItem.classList.add('hide');
           });
       });
   };
   

   En este código modificado, estás añadiendo el event listener al nuevo elemento de la lista tan pronto como se crea. Esto asegura que cada elemento de la lista tenga su propio event listener y que se cambie la clase ‘cross’ en los elementos individuales de la lista cuando se hace clic en ellos. Esto debería resolver tu problema de tachar cada otro elemento de la lista en lugar de cada uno individualmente.

   Espero que esto te ayude a entender cómo tachar elementos individuales en una aplicación de lista de tareas con Javascript. ¡Buena suerte con tu proyecto!

Comments are closed.