Boton de recarga

[BaSingSe]

Hola, hice un test para que los usuarios al darle clic vean por ejemplo que animal fuiste y eso... pero que pasa lo tengo aleatorio con javascript osea que este se elegira al instante y no me gsutaria que fuese asi. Me gustaria saber como al darle al boton de empezar test este se tome unos 5seg con una imagen de reload y luego aparesca la imagen.. graxx!!

[Alexis88]

Retarda la acción utilizando el método setTimeout. Cuando des el clic, muestras el Gif de carga y ejecutas este método, el cual retrasará la acción posterior a ejecutarse durante el tiempo que indiques.

Saludos

[BaSingSe]

Oh gracias muchas gracias!. Ya estuve viendo la propieda y pos tengo un pequeño problema, cada boton llama una funcion diferente trate de poner el SetTimeOut sin ninguna funcionn (cosa que no crea que sea correcta), no me funciono osea como le hago ya para que cuando cliken la funcion del boton primero pase por la funcion del SetTimeOut les dejo una parte del script

Código Javascript:

SetTimeOut(function(){
             function alertAries(){
                document.getElementById("test").style.display="none";
                document.getElementById("myP1").style.display="block";
            }
             function alertTauro(){
                document.getElementById("test").style.display="none";
                document.getElementById("myP2").style.display="block";
            }
},5000)
 

aqui el mini formulario

Código HTML:

<form>
                        <input type="button" class="btn margen-arriba btn-primary boton" onclick="alertAries()" value="Aries" /><br>
                        <input type="button" class="btn margen-arriba btn-primary boton" onclick="alertTauro()" value="Tauro" /><br>
</form>
 

[PHPeros]

Declaras las funciones:

Código Javascript:

function alertAries(){
              document.getElementById("test").style.display="none";
              document.getElementById("myP1").style.display="block";
            }
function alertTauro(){
              document.getElementById("test").style.display="none";
              document.getElementById("myP2").style.display="block";
           }
 

Y luego haces el timeout:

Código HTML:

<form>
                        <input type="button" class="btn margen-arriba btn-primary boton" onclick="setTimeout(alertAries,5000)" value="Aries" /><br>
                        <input type="button" class="btn margen-arriba btn-primary boton" onclick="setTimeout(alertTauro,5000)" value="Tauro" /><br>
</form>
 

[IsaBelM]

hay varias razones por la que no te funciona. pero, vamos a hacer que funcione sin declarar funciones (bonito trabalenguas)

var zodiaco = function(id) {
setTimeout(function() {
console.log(id);
}, 5000);
}

document.querySelectorAll('.btn')[0].addEventListener('click', function() {zodiaco('myP1')}, false);
document.querySelectorAll('.btn')[1].addEventListener('click', function() {zodiaco('myP2')}, false);

[BaSingSe]

Gracias por sus respuestas ya me esta funcionando como queria. Ahora para culminar mi "obra" ya solo me haria falta agregar un gift para simular el "loading"..

[IsaBelM]

var zodiaco = function(id) {
// aquí muestras el .gif
setTimeout(function() {
// aquí ocultas el .gif
console.log(id);
}, 5000);
}

[BaSingSe]

Isabel, estoy tratando de hacerlo de la manera que lo hiciste pero no me esta llamando nada :( maybe lo estoy haciendo mal si puedes darme un pequeño ejemplo te lo agradecere..

Código Javascript:

var zodiaco = function(id) { 
setTimeout(function() {
console.log(id);
}, 5000);
}
 
document.querySelectorAll('.btn')[0].addEventListener('click', function() {zodiaco('myP1')}, false);
document.querySelectorAll('.btn')[1].addEventListener('click', function() {zodiaco('myP2')}, false);
 

Al momento que agrego ese script y elimino el que tenia, no entiendo como este llama los divs ocultos que tengo.

[IsaBelM]

le estás pasando la id del elemento. me baso el código de tu segundo post

var zodiaco = function(id) {
setTimeout(function() {
document.getElementById("test").style.display="non e";
document.getElementById(id).style.display="inline" ;
}, 5000);
}