JavaScript - como hacer que al terminar el arreglo pueda aparecer un boton con opciones

 
Vista:
sin imagen de perfil

como hacer que al terminar el arreglo pueda aparecer un boton con opciones

Publicado por Jessica (11 intervenciones) el 06/03/2016 08:20:08
hola estoy creando un mini tutorial para explicar los diagramas de flujo, pero tengo un problema, cree un arreglo
para que pudieran ir viendose las imagenes del desarrollo del diagrama, pero quiero que a mitad del arreglo o al finalizar me aparezca un menu o botones en la pagina para seleccionar por donde se vaya el diagrama, por ejemplo en un if, al llegar a la condicion, el usuario tenga la opcion de seleccionar si sigue por el yes o el camino del no y que se muestre lo que pasaria, la verdad estoy muy desesperada, por mas que le muevo nomas no se me ocurre nada, alguna sugerencia??
adjunto aqui mi codigo

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
46
47
48
49
50
<html>
 
<div id="viewer">
	 <img id="imgU" src="1.jpeg" alt="" width='200' height='200'>
    <button onclick="anterior(document.all['imgU']);">anterior</button> <button onclick="siguientee(document.all['imgU']);">Siguiente</button>
</div>
<script>
 
 
// aqui ponemos la otra funcion 
 
(function(){
        var j = 0;
        document.all["imgU"].srcList = []
        document.all["imgU"].srcList[0] = "1.jpeg"
        document.all["imgU"].srcList[1] = "2.jpeg"
        document.all["imgU"].srcList[2] = "3.jpeg"
        document.all["imgU"].srcList[3] = "4.jpeg"
 
 
        anterior = function(imgElement){
            if(j !== 0){
                j--
            }else{
                alert("esta es la primera foto")
                return;
            }
            imgElement.src = imgElement.srcList[j]
        }
        siguientee = function(imgElement){
            j++
            if(!imgElement.srcList[j]){
                j--
 
// aqui me gustaria que me apareciera el boton en la pagina o como podre hacerle para empezar un arreglo nuevo???
			  //  setTimeout("location.href='page2.html'", 0);
				//alert("esta es la ultima foto")
			//	"location.href='index.html'" 
			//goto document.all["imgU"].srcList[0] = "grumos.png"
                return;
            }
            imgElement.src = imgElement.srcList[j]
 
        }
    })()
 
</script>
 
 
</html>
diagrama
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
Imágen de perfil de Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

como hacer que al terminar el arreglo pueda aparecer un boton con opciones

Publicado por Jordi (76 intervenciones) el 06/03/2016 09:17:48
Hola Jessica,

Por lo que cuentas, parece que lo que quieres hacer es una especie de carrusel de imágenes algo personalizado.

Bien, yo empezaría abordando el asunto simplificando un poco el código y poniendo en orden qué tiene que hacer. Si vas a manipular elementos del DOM, lo mejor es utilizar la librería JQuery, que te permitirá más flexibilidad y menor código para ello.

Entiendo que según la imagen en la que se esté, aparte de "anterior" y "siguiente", quieres mostrar un "sí" y un "no"?

Una vez aclarado esto, te puedo dar mi propuesta en código.

Un saludo.
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

como hacer que al terminar el arreglo pueda aparecer un boton con opciones

Publicado por Jessica (11 intervenciones) el 07/03/2016 03:10:33
No sabia como llamarlo ayer, pero en efecto si es una especie de carrusel!
pero mi problema es que al llegar por ejemplo a la foto numero 5, yo quiero que aparezca un mini menu o unos botones donde el usuario decida si quiere ir a la foto 6 o a la 7, y que asi mismo tenga la opcion de regresar a la foto numero 5 otra vez !
son diagramas de flujo mediante imagenes, entonces al llegar a la condicion yo quiero que el usuario decida cual opcion elegir.
no se si me explique mejor.
gracias, un saludo
Capture1
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 Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

como hacer que al terminar el arreglo pueda aparecer un boton con opciones

Publicado por Jordi (76 intervenciones) el 07/03/2016 06:37:10
Buenas,

Buenas Jessica,

En tal caso, yo me complicaría menos y empezaría utilizando JQuery. Simplifica mucho las cosas cuando toca manipular elementos del DOM. También jugaría con los atributos "hidden" y "value" de los botones. "Hidden" para ocultar los botones de SÍ o NO cuando no sean necesarios, "value" para recoger a qué fotografía hay que ir al pinchar en el botón y "disabled" para cuando estamos en la primera o última foto y no podemos avanzar/retroceder más.

Te dejo una sugerencia de cómo abordarlo. Si la ves más clara, podemos discutir cómo terminarla con los "TO DO" que se muestran en el código.

Un saludo.

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
<html>
	<img id="imagen" src="imagen1.jpg" />
	<button id="anterior" value="0" hidden>Anterior</button>
	<button id="siguiente" value="2">Siguiente</button>
	<button id="si" value="0" hidden></button>
	<button id="no" value="0" hidden>No</button>
</html>
 
<script>
// Handler del botón anterior
$("#anterior").click(function () {
	$("#anterior").val($("#anterior").val() - 1);  // Retrocedemos un número
	$("#imagen").prop("src", "imagen" + $("#anterior").val() + ".jpg"); // Nueva imagen es imagenX.jpg
	$("#anterior").prop("hidden", $("#anterior").val() == 1); // ocultamos el botón si pág = 1
});
 
// Handler del botón siguiente
$("#siguiente").click(function () {
	// TO DO: comprobar que estemos en la página para mostrar el si/no
	$("#").val($("#siguiente").val() + 1);  // Retrocedemos un número
	$("#imagen").prop("src", "imagen" + $("#siguiente").val() + ".jpg"); // Nueva imagen es imagenX.jpg
});
 
// TO DO: Handlers de "Sí / no"
</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

como hacer que al terminar el arreglo pueda aparecer un boton con opciones

Publicado por Jessica (11 intervenciones) el 08/03/2016 08:33:29
La verdad se ve bastante interesante, pero la verdad esta es la primera vez que programo en javascript y sigo aprendiendo de ello, se que javascript tiene infnidad de librerias y herramientas my buenas, pero apenas estoy empezando con este lenguaje, y tal vez por eso me complique tanto la vida con javascript, de todos modos muchas gracias por responder, tratare en un futuro de trabajar con jquery y las demas librerias que ofrece javascript.
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