Hice esto con éxito para una identificación de elemento; le dio el detector de eventos 'clic' para que aparezca un modal una vez que se lleve a cabo la acción. Ahora, estoy intentando con el mismo código JS pero apuntando a una clase en lugar de la identificación y no aparece nada, el enlace simplemente me lleva al sitio directamente en lugar de hacer que aparezca el modal.
Vale la pena decir que mi elemento id es un botón de la barra de navegación, y mi elemento class es solo texto con <a href= element y class= "link-to-app" . Aquí está el código para el botón de la barra de navegación, que se está ejecutando correctamente:
<script> //Client Login: Redirect Modal document.querySelector('.redirect-modal').style.display = 'none'; document.getElementById('btn-nav').addEventListener ('click', function() { document.querySelector ('.redirect-modal').style.display = 'flex'; document.querySelector ("body").style.overflow = 'hidden'; }); //Redirect Modal: Close document.querySelector('.close').addEventListener ('click', function() { document.querySelector ('.redirect-modal').style.display = 'none'; document.querySelector ("body").style.overflow = 'visible'; }); </script>Luego, el código para el elemento de clase, que como ya dije, no funciona:
<script> document.getElementsByClassName('.link-to-app').addEventListener('click', function() { document.querySelector('.redirect-modal').style.display = 'flex'; document.querySelector("body").style.overflow = 'hidden'; }) </script>No sé si usar una matriz con el método forEach ayudaría, y en tal caso, no sé si necesito eliminar el código de la ID e incluir este en la matriz junto con la clase. Cualquier ayuda sería genial, he probado varios métodos pero nada parece funcionar correctamente. Gracias de antemano.
document.querySelector() y document.getElementById() devuelven un solo nodo, por lo que parece que esa parte del código debería funcionar. Pero document.getElementsByClassName() devuelve una HTMLCollection que no es algo a lo que pueda llamar directamente a .addEventListener() . Debería iterar esa colección para obtener cada nodo en la lista y luego llamar a node.addEventListener() en cada uno. Puede usar un bucle for para iterar la lista de nodos.
Para tu información, puedes ver cómo iterar la lista aquí .
<script> const items = document.getElementsByClassName('.link-to-app'); for (let item of items) { item.addEventListener('click', function() { document.querySelector('.redirect-modal').style.display = 'flex'; document.querySelector("body").style.overflow = 'hidden'; }) } </script>Yo haría de esta manera:
document.getElementsByClassName('link-to-app')[0].addEventListener('click', function(event) { event.preventDefault(); document.querySelector('.redirect-modal').style.display = 'flex'; document.querySelector("body").style.overflow = 'hidden'; });Solo porque "getElementsByClassName" devuelve una matriz con todos los elementos que coinciden con esa etiqueta, uso [0] para referirme a ese elemento, solo si hay un elemento con esa etiqueta, si hay más, debe hacer una iteración.