Estoy creando una lista de tareas pendientes en JavaScript vainilla. En este momento, estoy tratando de aplicar un estilo a una tarea pendiente cuando la casilla de verificación correspondiente está marcada.
toDoContainer.addEventListener("change", function(e) { const tgt = e.target; if (tgt.classList.contains("checkbox")) { let toDo = tgt.closest("input").classList.contains("input"); if (toDo.value !== "") { toDo.style.opacity = "50%"; } } });Tal como está, nada está sucediendo visiblemente y no estoy recibiendo un error.
Estoy usando el método más cercano () porque la casilla de verificación y el todo son entradas que están una al lado de la otra en el DOM.
Antes estaba usando este código -
allCheckboxes.forEach(box => { box.addEventListener("change", () => { if (box.checked) { for (let toDo = 0; toDo < allToDos.length; toDo++) { if (allToDos[toDo].value) { allToDos[toDo].style.textDecoration = "line-through"; allToDos[toDo].style.opacity = "50%"; } } } else { console.log("cat"); for (let toDo = 0; toDo < allToDos.length; toDo++) { if (allToDos[toDo].value) { allToDos[toDo].style.textDecoration = "none"; allToDos[toDo].style.opacity = "100%"; } } } }) })Pude aplicar los estilos a las entradas, pero solo cuando se marcó la primera casilla de verificación en la lista de nodos. Al marcar la casilla de verificación, también se aplicaron los estilos a todos los todos en el DOM, no solo al correspondiente, que es lo que quiero.
Otra peculiaridad que acabo de notar es que cuando miro las herramientas de desarrollo para ver si está registrando las casillas de verificación, muestra una lista de nodos vacía: [] cuando hay varias casillas de verificación visibles.
document.getElementById("add").addEventListener("click", () => { console.log(allCheckboxes); });¿Cómo puedo aplicar estilo solo a la tarea pendiente correspondiente cuando una casilla de verificación está marcada?
*** EDITAR - https://codepen.io/harri-greeves/pen/LYLEKNj ***
Estoy usando el método más cercano () porque la casilla de verificación y el todo son entradas que están una al lado de la otra en el DOM.
El método más cercano busca el elemento mismo y luego busca los ancestros del elemento, moviéndose hacia arriba en el árbol dom.
No creo que .closest se pueda usar para apuntar a hermanos.
El problema está en línea:
const allCheckboxes = toDoContainer.querySelectorAll("[type=checkbox]");
querySelector devuelve una colección html no viva. Significa que no incluirá todos agregados dinámicamente.
La mejor manera es escuchar el nodo principal: todoContainer y luego manipular el estado.
añadir esta función
function ChangeOpacity() { let checkbox = document.getElementsByClassName("checkbox"); let input = document.getElementsByClassName("input"); for (let i = 0; i < checkbox.length; i++) { checkbox[i].addEventListener("change",()=>{ if (checkbox[i].checked == true) { if (input[i].value) { input[i].style.opacity = "50%" input[i].style.textDecoration = "line-through" } else{ input[i].style.opacity = "100%" input[i].style.textDecoration = "none" } } else { if (input[i].value) { input[i].style.opacity = "50%" input[i].style.textDecoration = "line-through" } else{ input[i].style.opacity = "100%" input[i].style.textDecoration = "none" } } }) } } ChangeOpacity() y luego llame a esta función a la función createToDo , todo debería funcionar bien y es más limpio de esta manera