vista previa de la aplicación de lista de tareas pendientes
Tengo dos addEventListener, uno es para cambiar el color del texto y el otro para cambiar el color del círculo.
Condición 1: cuando hice clic en el círculo, tanto el texto como el color del círculo cambiaron.
Condición 2: El problema fue cuando hice clic en el texto , su color cambió, pero el círculo no cambió .
Entonces, ¿puedo fusionarlo en solo un addEventListener en el círculo? y deshabilitar clic para el texto? ¿O puedo hacer que el texto funcione como si hiciera clic en el círculo?
Enlace GitHub
Avance
let lists = document.querySelectorAll(".list-item"); let circles = document.querySelectorAll(".fa-circle"); // Click the text Array.from(lists).forEach((list) => { list.addEventListener("click", () => { list.classList.add("done"); }); }); // Click the circle Array.from(circles).forEach((circle) => { circle.addEventListener("click", () => { circle.classList.remove("fa-regular"); circle.classList.add("fa-solid", "fa-circle-check"); }); });Depende de lo que quieras. Por cierto, ¿cómo se ve tu árbol DOM? ¿Es .list-item padre o hermano de '.fa-circle'? Si desea enviar el evento una vez que el usuario haga clic en cualquier lugar de un elemento de la lista. Entonces puedes usar el padre, así:
const listParents = document.querySelectorAll('.list-parent') function handleItemClick(event) { const listParent = event.target const listText = listParent.querySelector('.list-item') const listCircle = listParent.querySelector('.list-circle') listText.classList.toggle('done') listCircle.classList.toggle('fa-circle') listCircle.classList.toggle('fa-regular') listCircle.classList.toggle('fa-circle-check') listCircle.classList.toggle('fa-solid') l } Array.from(listParents).forEach(listParent => { listParent.addEventListener('click', handleItemClick) })