Foros del Web » Programando para Internet » Javascript »

Detectar valor document.getElementById() dentro de un array

Estas en el tema de Detectar valor document.getElementById() dentro de un array en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/04/2020, 10:14
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.931
Antigüedad: 17 años, 2 meses
Puntos: 63
Detectar valor document.getElementById() dentro de un array

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:
Ver original
  1. <li><img id="azul" src="img/azul.png" ></li>
  2. <li><img id="amarillo" src="img/amarillo.png" ></li>
  3. <li><img id="verde" src="img/verde.png" ></li>
  4. <li><img id="rojo" src="img/verde.png" ></li>

Código Javascript:
Ver original
  1. <script>
  2. // Get the modal //
  3. var modal = document.getElementById("myModal");
  4.  
  5.  
  6. var img1 = document.getElementById("azul");
  7. var img2 = document.getElementById("amarillo");
  8. var img3 = document.getElementById("verde");
  9. var img3 = document.getElementById("rojo");
  10.  
  11. var modalImg = document.getElementById("img-modal-grande");
  12. var captionText = document.getElementById("caption");
  13.  
  14. //Click en imágenes a mostrar
  15. img1.onclick = function(){  
  16.   modal.style.display = "flex";
  17.   modalImg.src = this.src;
  18.   captionText.innerHTML = this.alt;
  19. }
  20.  
  21. img2.onclick = function(){
  22.   modal.style.display = "flex";
  23.   modalImg.src = this.src;
  24.   captionText.innerHTML = this.alt;
  25. }
  26. img3.onclick = function(){  
  27.   modal.style.display = "flex";
  28.   modalImg.src = this.src;
  29.   captionText.innerHTML = this.alt;
  30. }
  31. img4.onclick = function(){  
  32.   modal.style.display = "flex";
  33.   modalImg.src = this.src;
  34.   captionText.innerHTML = this.alt;
  35. }
  36.  
  37. // Get the <span> element that closes the modal
  38. var span = document.getElementsByClassName("close")[0];
  39.  
  40. // When the user clicks on <span> (x), close the modal
  41. span.onclick = function() {
  42.   modal.style.display = "none";
  43. }
  44.  
  45. </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:
Ver original
  1. <script>
  2.  
  3. var modal = document.getElementById("myModal");
  4.  
  5. //Coge el valor para luego devolverlo al hacer onclick
  6.  
  7.  
  8. var myArray = ['azul', 'amarillo', 'verde', 'rojo' ];
  9.  
  10. for(i=0;i<myArray.length;i++){
  11.    
  12.     var img = document.getElementById(myArray[i]);
  13.  
  14.     //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.
  15.     //var img = document.getElementById(myArray[i]).id = myArray[i];   
  16.  
  17. }
  18.  
  19. var modalImg = document.getElementById("img-modal-grande");
  20. var captionText = document.getElementById("caption");
  21.  
  22. //Click en imágenes a mostrar
  23. img.onclick = function(){  
  24.   modal.style.display = "flex";
  25.   modalImg.src = this.src;
  26.   captionText.innerHTML = this.alt;
  27. }
  28.  
  29.  
  30. // Get the <span> element that closes the modal
  31. var span = document.getElementsByClassName("close")[0];
  32.  
  33. // When the user clicks on <span> (x), close the modal
  34. span.onclick = function() {
  35.   modal.style.display = "none";
  36. }
  37.  
  38. </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.
  #2 (permalink)  
Antiguo 22/04/2020, 10:43
 
Fecha de Ingreso: abril-2011
Mensajes: 125
Antigüedad: 9 años, 2 meses
Puntos: 44
Respuesta: Detectar valor document.getElementById() dentro de un array

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:
Ver original
  1. <div id="contenedor">
  2.    <li><img id="azul" src="img/azul.png" ></li>
  3.    <li><img id="amarillo" src="img/amarillo.png" ></li>
  4.    <li><img id="verde" src="img/verde.png" ></li>
  5.    <li><img id="rojo" src="img/verde.png" ></li>
  6. </div>

y asociar el evento click a dicho contenedor:

Código Javascript:
Ver original
  1. document.getElementById("contenedor").onclick = function(event){
  2.   var elemento = event.target;
  3.   if(elemento.tagName = "IMG"){ // si se ha hecho click a una imagen
  4.     modal.style.display = "flex";
  5.     modalImg.src = elemento.src;
  6.     captionText.innerHTML = elemento.alt;
  7.   }
  8. }

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.
  #3 (permalink)  
Antiguo 22/04/2020, 10:59
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.122
Antigüedad: 16 años
Puntos: 810
Respuesta: Detectar valor document.getElementById() dentro de un array

Cita:
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;
        }
    }
);
  #4 (permalink)  
Antiguo 22/04/2020, 16:21
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.931
Antigüedad: 17 años, 2 meses
Puntos: 63
Respuesta: Detectar valor document.getElementById() dentro de un array

Cita:
Iniciado por prueba230683 Ver Mensaje
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:
Ver original
  1. <div id="contenedor">
  2.    <li><img id="azul" src="img/azul.png" ></li>
  3.    <li><img id="amarillo" src="img/amarillo.png" ></li>
  4.    <li><img id="verde" src="img/verde.png" ></li>
  5.    <li><img id="rojo" src="img/verde.png" ></li>
  6. </div>

y asociar el evento click a dicho contenedor:

Código Javascript:
Ver original
  1. document.getElementById("contenedor").onclick = function(event){
  2.   var elemento = event.target;
  3.   if(elemento.tagName = "IMG"){ // si se ha hecho click a una imagen
  4.     modal.style.display = "flex";
  5.     modalImg.src = elemento.src;
  6.     captionText.innerHTML = elemento.alt;
  7.   }
  8. }

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.

Cita:
Iniciado por Panino5001 Ver Mensaje
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:
Ver original
  1. // seleccionamos todas las img dentro de la lista (li)
  2. var images = document.querySelectorAll("li > img");
  3.  
  4. for (i = 0; i < images.length; i++) {
  5.         images[i].addEventListener("click", function(){
  6.              modal.style.display = "flex";
  7.             modalImg.src = this.getAttribute('src');
  8.             captionText.innerHTML = this.getAttribute('alt');
  9.        });
  10.     }

Gracias a ambos por la gran ayuda.

Última edición por kahlito; 22/04/2020 a las 16:28 Razón: Añadir nueva opción
  #5 (permalink)  
Antiguo 22/04/2020, 18:56
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.122
Antigüedad: 16 años
Puntos: 810
Respuesta: Detectar valor document.getElementById() dentro de un array

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
  #6 (permalink)  
Antiguo 23/04/2020, 04:01
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.931
Antigüedad: 17 años, 2 meses
Puntos: 63
Respuesta: Detectar valor document.getElementById() dentro de un array

Hola de nuevo Panino5001

Ok, ahora entiendo.

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



La zona horaria es GMT -6. Ahora son las 13:32.