Esto es tan básico. Estoy tratando de modelar varios escenarios addEventListener para simplemente cambiar los elementos de estilo css.
aqui esta el html
<ul> <li>bullet 1</li> <li>bullet 2</li> </ul>aqui esta el javascript
const giraffe = document.querySelector("li"); giraffe.addEventListener("click", myFunc); function myFunc(){ giraffe.style.backgroundColor = "#f00"; }Estoy tratando de entender el comportamiento.
Novato total. Casi entiendo las funciones de flecha y puedo leer funciones anónimas, pero me resulta más fácil de seguir si puede deletrear cualquier función adicional.
Esto se debe a que el selector de consulta solo selecciona la primera ocurrencia que se ajusta a los criterios. Considere agregar ID en los elementos HTML y selecciónelos en consecuencia.
Aunque tiene más de uno de los elementos similares, querySelector solo se aplica siempre al primer elemento. También es la razón por la que tu estilo solo funciona en la giraffe , que es el primer elemento.
Si desea que su evento de clic y estilo se apliquen a todos los elementos similares, debe usar querySelectorAll y un bucle forEach para cambiar elemento por elemento.
const giraffes = document.querySelectorAll("li"); giraffes.forEach(giraffe => giraffe.addEventListener("click", myFunc)); function myFunc(){ giraffes.forEach(giraffe => giraffe.style.backgroundColor = "#f00"); } <ul> <li>bullet 1</li> <li>bullet 2</li> </ul>Funciona solo en el primero porque ese es el comportamiento de document.querySelector , devuelve el primer elemento dentro del documento que coincide con el selector o grupo de selectores especificado. Si desea que afecte a todos los elementos li , debe considerar usar document.querySelectorAll
Esto se debe a que el evento de clic se adjunta solo al primer elemento li y este código: giraffe.style.backgroundColor = "#f00"; está cambiando el color de fondo de solo ese elemento.
Puede mejorar su código usando el siguiente fragmento.
const lis = document.querySelectorAll('li'); lis.forEach(li => { li.addEventListener('click', () => { li.style.backgroundColor = "#f00"; }) });