Botón Ocultar por unos segundos onclick

Quiero desactivar el botón al hacer clic durante unos segundos, y mostrar una imagen durante este tiempo, luego ocultar la imagen y mostrar el botón de nuevo.

HTML:

  

JavaScript:

 function validate(){ var myButton= document.getElementById('myButton'); var myImage= document.getElementById('myImage'); setTimeout (function(){ myButton.style.display ='none'; },5000); setTimeout (function(){ myImage.style.display ='inline'; },5000); } 

PROBLEMA:

  1. Este código js no se ejecuta al hacer clic, pero después de que se invoca la acción de este botón (usando JSF 2)

  2. Cuando se invoca este código, el botón se oculta y aparece la imagen, pero nunca se vuelve a ocultar, y el botón no se muestra de nuevo.

por favor asesórese sobre cómo solucionarlo.

En realidad, está ocultando el botón y mostrando la imagen después de 5 segundos, y luego no la vuelve a cambiar. Prueba esto:

 function validate(){ var myButton= document.getElementById('myButton'); var myImage= document.getElementById('myImage'); myButton.style.display ='none'; myImage.style.display ='inline'; setTimeout (function(){ myButton.style.display ='inline'; myImage.style.display ='none'; },5000); } 

Quizás te refieres

  setTimeout (function(){ myButton.style.display ='none'; setTimeout (function(){ setTimeout (function(){ myButton.style.display ='none'; },5000); myImage.style.display ='inline'; },5000); },5000); 

Agregaste código solo para ocultar el botón y mostrar la imagen. La función debería verse así:

 function validate(){ var myButton= document.getElementById('myButton'); var myImage= document.getElementById('myImage'); var hide_timeout = 5000; // delay 5 sec before hide button; var show_timeout = 10000; // delay 10 sec before show button; setTimeout (function(){ myButton.style.display ='none'; myImage.style.display ='inline'; },hide_timeout); setTimeout (function(){ myButton.style.display ='inline'; myImage.style.display ='none'; },show_timeout); } 

Ajustes menores:

 function validate() { var myButton= document.getElementById('myButton'); var myImage= document.getElementById('myImage'); myButton.style.visibility='hidden'; myImage.style.display ='inline'; setTimeout (function(){ myImage.style.display ='none'; myButton.style.visibility ='visible'; },5000); return false; }