0

Tengo el siguiente script que entiendo es bastante básico. Yo soy muy novata en Javascript y no comprendo por qué no recorre todos los objetos con el mismo nombre de clase, en cambio solo funciona en el primero.

el script es el siguiente:

var postmodernmedia = document.getElementsByClassName("post-modern-media")[0];

 postmodernmedia.addEventListener("touchstart", function(){
   postmodernmedia.classList.add("post-modern-media-phone");
})

postmodernmedia.addEventListener("touchend", function(){
    postmodernmedia.classList.remove("post-modern-media-phone");
})

El script lo que hace es crear un efecto "hover" en dispositivos moviles al tocar sobre una imagen modificando una clase CSS que le quita opacidad a la misma. Al quitar el dedo sobre la imagen, la misma se pone nuevamente opaca. Deberia funcionar en todas las imagenes que tengan el mismo nombre de clase .post-modern-media Pero solo funciona en la primera imagen del código HTML y en el resto no surje el efecto "hover".

¿que estoy haciendo mal en el script que no logro que recorra todas las imagenes con la misma clase para que surta el efecto en todas?

2
  • 2
    Que el codigo solo está aplicando al elemento [0]. Por eso solo funciona en el primero
    – Pipe
    Commented el 25 feb. 2023 a las 14:40
  • Gracias Pipe por el aporte! Como bien dije, soy una completa novata en javascript jaja Commented el 25 feb. 2023 a las 17:48

1 respuesta 1

0

Como bien dice @Pipe en su comentario, debes alcanzar todos los elementos (actualmente alcanzas sólo uno). Igualmente, debes asignar el evento de escucha a todos los elementos.

Te aconsejo que en vez de getElementsByClassName() uses querySelectorAll().

/*
   OJO: con querySelectorAll se usa la notación: .nombreDeLaClase
*/

var postmodernmedia = document.querySelectorAll(".post-modern-media");

postmodernmedia.forEach(post => 
  post.addEventListener("touchstart", () => post.classList.add("post-modern-media-phone"))
)

postmodernmedia.forEach(post => 
  post.addEventListener("touchend", () => post.classList.remove("post-modern-media-phone"))
)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.