Detectar valor document.getElementById() dentro de un array

[kahlito]

Iniciado por prueba230683

Como el evento click tiene efecto burbuja (bubbling), lo que puedes hacer es crear un contenedor genérico para todas esas imágenes:

Código HTML:

<div id="contenedor">
   <li><img id="azul" src="img/azul.png" ></li>
   <li><img id="amarillo" src="img/amarillo.png" ></li>
   <li><img id="verde" src="img/verde.png" ></li>
   <li><img id="rojo" src="img/verde.png" ></li>
</div>
 

y asociar el evento click a dicho contenedor:

Código Javascript:

document.getElementById("contenedor").onclick = function(event){
  var elemento = event.target;
  if(elemento.tagName = "IMG"){ // si se ha hecho click a una imagen
    modal.style.display = "flex";
    modalImg.src = elemento.src;
    captionText.innerHTML = elemento.alt;
  }
}
 

De esta forma no hace falta recorrer cada una de las imágenes. Además, si si añaden más imagenes dinámicamente, el código sigue funcionando.

Gracias prueba230683, me va perfecto.

Iniciado por Panino5001

Estaba respondiéndote, pero se me adelantó prueba230683. Solo cambiaría esto:

Código:

contenedor.onclick = function(event){
  var elemento = event.target;
  if(elemento.tagName = "IMG"){ // si se ha hecho click a una imagen
    modal.style.display = "flex";
    modalImg.src = elemento.src;
    captionText.innerHTML = elemento.alt;
  }
}

Por esto:

Código:

var contenedor=document.getElementById('contenedor');
contenedor.addEventListener(
    'click',
     function(e){
        var elemento = e.target;
        if(elemento.nodeName.toLowerCase()== "img"){
            modal.style.display = "flex";
            modalImg.src = elemento.src;
            captionText.innerHTML = elemento.alt;
        }
    }
);

Gracias Panino5001, también me salio a la primera.

¿Qué diferencia hay en el cambio? ¿Con cual me quedo al final?

Por cierto, también me pasaron esta opción, la dejo aquí por si también para compartir:

Código Javascript:

// seleccionamos todas las img dentro de la lista (li)
var images = document.querySelectorAll("li > img");
 
for (i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function(){
             modal.style.display = "flex";
            modalImg.src = this.getAttribute('src');
            captionText.innerHTML = this.getAttribute('alt');
       });
    }
 

Gracias a ambos por la gran ayuda.