Detectar valor document.getElementById() dentro de un array

[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.