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?