Me piden que cada vez que se toque un item, se tache automáticamente. Para esto tengo la siguiente clase para aplicarla sólo y sólo cuando el usuario de click a un < li > :
.done {
text-decoration: line-through;
}
Soy incapaz de encontrar un DOM selector que me seleccione todos los "li".
Si hago esto
var li = document.getElementsByTagName("li");
function toggling(){
li.classList.toggle("done");
}
li.addEventListener("click", toggling);
Me dice "li is not defined". (Y Si pruebo con querySelectorAll me dice "li.addEventListener is not a function").
Así que he hecho esto, que consiste en que cada vez que cambie el parametro de tachar, cojerá un index diferente:
function tachar(posicion){
var li = document.getElementsByTagName("li")[posicion];
function toggling(){
li.classList.toggle("done");
}
li.addEventListener('click', toggling);
}
tachar(0);
Ahora, cómo hacer una función en la que haga tachar(), unas 100 veces por ejemplo cambiando cada una el parametro, hasta llegar a 100, y asi me aseguro que los 100 items primeros se van a poder tachar. Quiero hacer esto para asi evitar tener que poner "tachar(0)", "tachar(1)" así hasta 100.
Sé que me estoy complicando mucho pero llevo un rato mirando como hacerlo de la manera simple y rápida (la primera) pero sigo sin entender como funciona los selectores DOM y no logro coger todos de una.