Hide AND unhide a
or
while executing code (progress bar a.o.)

Question

the goal is to hide a form, do some stuff and unhide the form again. For example with this code for a progress bar I thought to do the following but the hiding/unhiding doesn't work. I'm probably overseeing something obvious.

    <!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>

gsharew · Accepted Answer · 2022-05-24T11:31:45.850

you can hide and unhide it. the problem with your code is when you trigger ready buton it will hide and then unhide the code automatically. this is becuase setInterval() function is asynchronious function. then you need call show_div() function inside the 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>

i hope this will fix your problem.

Thanks, code better to understand with separate functions for hide_div (first step) and show_div. Thanks for the explanation re. asynchronous as well. — Gert, May 24 '22 at 11:52

Hide AND unhide a or while executing code (progress bar a.o.)

1 Answers1

Hide AND unhide a
or
while executing code (progress bar a.o.)