el objetivo es ocultar un formulario, hacer algunas cosas y volver a mostrar el formulario. Por ejemplo, con este código para una barra de progreso, pensé en hacer lo siguiente, pero ocultar/mostrar no funciona. Probablemente estoy supervisando algo obvio.
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Progress Bar Demo</title> <script> var button; var count; var countmax; var progressbar; var timerID; function start(max) { show_div(); button = document.getElementById("button"); count = 0; countmax = max; progressbar = document.getElementById("bar"); progressbar.max = countmax; timerID = setInterval(function(){update()},10); show_div(); }//end function function update() { button.innerHTML = "Counting to " + countmax; count = count + 100; progressbar.value = count; if (count >= countmax) { clearInterval(timerID); button.innerHTML = "Ready"; progressbar.value = 0; }//end if }//end function function show_div() { var x = document.getElementById("do_you_see_me?"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }//end function </script> </head> <body> <div id="do_you_see_me?" style="display: block";>Hi there!</div> <p> <button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br> <br> <progress id="bar" value="0"></progress> </p> </body> </html>puedes ocultarlo y mostrarlo. el problema con su código es cuando activa el botón listo, se ocultará y luego mostrará el código automáticamente. esto se debe a que la función setInterval() es una función asíncrona. entonces necesita llamar a la función show_div() dentro de setInterval().
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Progress Bar Demo</title> <script> var button; var count; var countmax; var progressbar; var timerID; function start(max) { hide_div(); button = document.getElementById("button"); count = 0; countmax = max; progressbar = document.getElementById("bar"); progressbar.max = countmax; timerID = setInterval(function() { update() if(count>=countmax) { show_div(); } },10); }//end function function update() { button.innerHTML = "Counting to " + countmax; count = count + 100; progressbar.value = count; if (count >= countmax) { clearInterval(timerID); button.innerHTML = "Ready"; progressbar.value = 0; }//end if }//end function function show_div() { document.getElementById("do_you_see_me?").style.display="block"; }//end function function hide_div() { document.getElementById("do_you_see_me?").style.display="none"; } </script> </head> <body> <div id="do_you_see_me?" style="display: block";>Hi there!</div> <p> <button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br> <br> <progress id="bar" value="0"></progress> </p> </body> </html>Espero que esto solucione tu problema.