Detectar valor document.getElementById() dentro de un array

[kahlito]

Hola.

Tengo una galería de imágenes donde intento que cuando el usuario haga click en cada una de ellas se muestre esa misma imagen en grande. Lo logro hacer con su correspondiente "id" y con javascript.

Ejemplo:

Código HTML:

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

Código Javascript:

<script>
// Get the modal //
var modal = document.getElementById("myModal");
 
 
var img1 = document.getElementById("azul");
var img2 = document.getElementById("amarillo");
var img3 = document.getElementById("verde");
var img3 = document.getElementById("rojo");
 
var modalImg = document.getElementById("img-modal-grande");
var captionText = document.getElementById("caption");
 
//Click en imágenes a mostrar
img1.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
img2.onclick = function(){ 
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img3.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img4.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
 
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
 
</script>
 

Hasta aquí bien, pero claro si son 20 imágenes e intento hacerlo en un array al intentar coger el valor dentro de document.getElementById() no lo reconoce

Código Javascript:

<script>
 
var modal = document.getElementById("myModal");
 
//Coge el valor para luego devolverlo al hacer onclick
 
 
var myArray = ['azul', 'amarillo', 'verde', 'rojo' ];
 
for(i=0;i<myArray.length;i++){
    
    var img = document.getElementById(myArray[i]);
 
    //Prueba añadiendo de nuevo el valor a id, donde aquí si lo reconoce pero al hacer clien en la imagen luego no hace la fución.
    //var img = document.getElementById(myArray[i]).id = myArray[i];    
 
}
 
var modalImg = document.getElementById("img-modal-grande");
var captionText = document.getElementById("caption");
 
//Click en imágenes a mostrar
img.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
 
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
 
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
 
</script>
 

¿Cómo podría hacer que reconozca el valor del id dentro del array para luego devolverlo o llamarlo al hacer click en cada imagen?

Saludos.

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

[Panino5001]

Hola, Kalhito, no hace falta referir al id ni hacer una función por cada imagen. Podés usar delegación de eventos, por ejemplo (hay muchas maneras, pero esa te irá bien). Podés investigar un poco (https://javascript.info/event-delegation), pero es más o menos así:

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;
        }
    }
);

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

[Panino5001]

Hola, Kahlito. Cualquiera de las dos, yo puse la mía porque en la primera edición de prueba230683 figuraba "contenedor" como variable y no se sabía qué era. Luego lo editó a document.getElementById("contenedor") y ahí sí ya quedó claro qué era y ya da lo mismo. Usa la que más te guste

[kahlito]

Hola de nuevo Panino5001

Ok, ahora entiendo.

Pues lo dicho, muchas gracias a los dos por la ayuda, saludos.