Detectar valor document.getElementById() dentro de un array
Publicado por José Carlos (2 intervenciones) el 22/04/2020 18:19:34
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:
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ó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.
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:
1
2
3
4
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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 mostrarimg1.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 modalvar span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modalspan.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
var modal = document.getElementById("myModal");
//Coge el valor para luego devolverlo al hacer onclickvar 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 mostrarimg.onclick = function(){
modal.style.display = "flex";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modalspan.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.
Valora esta pregunta
0