0

Tengo una galeria de imagenes (aprox 100 imagenes) y a cada una necesito agregarle un onclick="function()", en otras palabras necesito un script que agregue el onclick="function()" a cada etiqueta por mi, y asi no tener teclear ese onlclik a cada etiqueta. he intentado de estas 2 formas.

let IMGs = Array.prototype.slice.apply(document.getElementsByTagName('img'));
IMGs.map((img) => img.setAttribute(onclick,'openFullImg(this.src)'));


document.getElementsByName('img').addEventListener('click', openFullImg(this.src));
3
  • Y por qué no se lo agregas al elemento padre? Creo que los eventos se heredaban.
    – Christian
    Commented el 22 may. 2022 a las 1:40
  • lo mejor seria delegar el evento al documento y chequear que si el que disparo el evento es una imagen actuar en consecuencia Commented el 22 may. 2022 a las 1:46
  • mhmhm.. no lo habia pensado, voy a probarlo, gracias.
    – Yomar Cs
    Commented el 22 may. 2022 a las 1:53

2 respuestas 2

1

Con un 'for' puedes recorrer todos los tag 'img'

  <div class="col">
      <img src="https://www.jquery-az.com/wp-content/uploads/2015/12/2.1-HTML-img-src.jpg" alt="baner-imagen">   
  </div>
  <div class="col">
      <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/chrome-true.png" alt="baner-imagen">   
  </div>
  <div class="col">
      <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" alt="baner-imagen">   
  </div>
 <script>
    var imagenes = document.getElementsByTagName("img");
    for (var i=0; i<imagenes.length; i++)
    {          
      imagenes[i].addEventListener('click', function() {
        console.log('click')
      });
    }
  </script>
1
  • gracias Frnk, sirvio el bucle(añadio correctamente la función a todas las etiquetas img) pero con un cierto inconveniente, al cargar la pagina por defecto me abre el contenedor de la imagen. sin haber clickeado en ninguna etiqueta, al cerrar ese contenedor si funciona correctamente todo. Se agradece el aporte.
    – Yomar Cs
    Commented el 23 may. 2022 a las 23:21
0

Tal como ya te han indicado correctamente en los comentarios, una posible solución pasa por utilizar la delegación de eventos, asignando ese evento a un elemento padre, lo más cercano posible, que los contenga a todos. Eso sería lo más óptimo. O bien asignarlos al elemento body o document, que no sería tan óptimo pero también funcionaría.

Usando el body, podría ser así:

document.body.addEventListener('click', function (event) {
  if(event.target.tagName == "IMG") {
     openFullImg(event.target.src)
  }
});

donde event.target representa el elemento que ha recibido el evento y donde event.target.tagName nos devuelve el tag del elemento que ha recibido el evento, y mediante el condicional nos aseguramos que sea IMG para entrar en él y ejecutar la función openFullImg().

Snippet de muestra:

document.body.addEventListener('click', function(event) {
  if (event.target.tagName == "IMG") {
    openFullImg(event.target.src)
  }
});

function openFullImg(src) {
  console.log(src)
}
<img src="imagen1.jpg" alt="imagen1">
<img src="imagen2.jpg" alt="imagen2">

Usando un elemento que contenga las imágenes referenciado por su id podría ser así:

<div id="imagenes">
  <img src="imagen1" alt="imagen1">
  <img src="imagen2" alt="imagen2">
</div>
<script>
contenedor = document.getElementById("imagenes")
contenedor.addEventListener('click', function(event) {
  if (event.target.tagName == "IMG") {
    openFullImg(event.target.src)
  }
});
</script>

Snippet de muestra:

contenedor = document.getElementById("imagenes")
contenedor.addEventListener('click', function(event) {
  if (event.target.tagName == "IMG") {
    openFullImg(event.target.src)
  }
});

function openFullImg(src) {
  console.log(src)
}
<div id="imagenes">
  <img src="imagen1" alt="imagen1">
  <img src="imagen2" alt="imagen2">
</div>

1
  • Gracias por tu aporte masterguru, fue de gran ayuda.
    – Yomar Cs
    Commented el 23 may. 2022 a las 23:11

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.