JavaScript - ayuda con javascript con varias img

 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por sergio (6 intervenciones) el 10/08/2020 17:38:56
b dia. tengo una pag web y necesito crear 3 botones
boton hormigon
boton suelo
boton viviendas

cada boton debe hacer click y mostrar X cantidad de imagenes

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
<div class="text-center">
    <button type="submit" id="botonF1" value="Mostrar1" onclick="javascript:document.getElementById('f1').style.display='block'; ">Hormigon</button>
    <button type="submit " id="botonF2 " value="Mostrar2 " onclick="javascript:document.getElementById( 'f2').style.display='block'; ">suelo</button>
    <button type="submit" id="botonF3" value="Mostrar3" onclick="javascript:document.getElementById('f3').style.display='block';">viviendas</button>
</div>
<div class="container-fluid">
    <div class="row " id="obras">
 
        <div id="f1" style="display: none;"></div>
        <div id="f2" style="display: none;"></div>
        <div id="f3" style="display: none;"></div>
 
 
    </div>
</div>
 
<script>
    let f1 = 19; //cantdiad de fotos
    let gallery = document.getElementById('f1');
    for (let i = 1; i <= f1; i++) {
        gallery.innerHTML += '<img class="lazy" src="images/obras/hormigon/' + i + '.jpg">';
 
    }
    let f2 = 8; //cantdiad de fotos
    let galleria = document.getElementById('f2');
    for (let i = 1; i <= f2; i++) {
        galleria.innerHTML += '<img class="lazy" src="images/obras/civil/' + i + '.jpg">';
    }
    let f3 = 4; //cantdiad de fotos
    let gallerias = document.getElementById('f3');
    for (let i = 1; i <= f3; i++) {
        gallerias.innerHTML += '<img class="lazy" src="images/obras/suelos/' + i + '.jpg">';
    }
</script>

muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por Alfredo (30 intervenciones) el 22/08/2020 04:41:39
El codigo que tienes al final debe estar en una funcion yblps botones deben llamar esa funcion pasandole el id del div que quieres mostrar las imagenes. Esa sería la solución directa a tu problema. Hay una manera más elaborada si te interesa
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por sergio (6 intervenciones) el 23/08/2020 04:40:16
El problema que tengo es que cuando pulso primer el boton vivienda me muestras las fotos correctas, si pulso el de suelos tambien y si luego pulso hormigon tambien me muestras las fotos correspondientes. Ahora bien si yo pulso primero hormigon me muestra las imagenes correspondientes pero ya no me responden los otros botones.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Wilfredo Patricio Castillo
Val: 34
Ha aumentado su posición en 9 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por Wilfredo Patricio Castillo (12 intervenciones) el 23/08/2020 00:53:16
Tendrías que armar el contenido, y al final el innerHTML, con eso tendrás todas las imágenes

Saludos,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por sergio (6 intervenciones) el 23/08/2020 04:41:10
El problema que tengo es que cuando pulso primer el boton vivienda me muestras las fotos correctas, si pulso el de suelos tambien y si luego pulso hormigon tambien me muestras las fotos correspondientes. Ahora bien si yo pulso primero hormigon me muestra las imagenes correspondientes pero ya no me responden los otros botones.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por Alfredo (30 intervenciones) el 23/08/2020 06:39:11
Prueba de esta manera

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="text-center">
    <button type="submit" id="botonF1" value="Mostrar1" onclick="javascript:mostrarImagenes('hormigon', 19);">Hormigon</button>
    <button type="submit " id="botonF2 " value="Mostrar2 " onclick="javascript:mostrarImagenes('suelo', 8);">suelo</button>
    <button type="submit" id="botonF3" value="Mostrar3" onclick="javascript:mostrarImagenes('viviendas', 4);">viviendas</button>
</div>
<div class="container-fluid">
    <div class="row " id="obras">
        <div id="f1" style="block" ></div>
    </div>
</div>
 
<script>
    function mostrarImagenes(path, numeroDeImagenes) {
    let gallery = document.getElementById('f1');
    gallery.innerHTML= '';
    for (let i = 1; i <= numeroDeImagenes; i++) {
        gallery.innerHTML += `<img class="lazy" src="images/obras/${path}/${i}.jpg">`;
 
    }
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por sergio (6 intervenciones) el 25/08/2020 01:26:41
Muchas gracias, pero vos sabes que me funciona un solo boton. al pulsar hormigon se ven todas las imagenes perfectamente péro al pulsar los otros botones no encuentra las imagenes. Te explico las iamgenes estan en distinta carpeta y los F1 , F2 y F3 hacen referencia a la carpeta donde se encuentran las imagenes. Deberia agregar un div x cada F que tengo?????
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por sergio (6 intervenciones) el 25/08/2020 01:26:47
Muchas gracias, pero vos sabes que me funciona un solo boton. al pulsar hormigon se ven todas las imagenes perfectamente péro al pulsar los otros botones no encuentra las imagenes. Te explico las iamgenes estan en distinta carpeta y los F1 , F2 y F3 hacen referencia a la carpeta donde se encuentran las imagenes. Deberia agregar un div x cada F que tengo?????
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por Alfredo (30 intervenciones) el 25/08/2020 05:32:23
Si lbservas se esta mandando el nombre de l carpeta en la funcion de cada boton. No necesitas multiples div. Uno solo basta. Estas copiando tanto el html como el javascript?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con javascript con varias img

Publicado por sergio (6 intervenciones) el 25/08/2020 14:23:30
muchisimas gracias enorme ayuda. tenia mal las letras de las carpetas SOLUCIONADO. ENORMES GRACIAS
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar