Hide AND unhide a <div> or <form> while executing code (progress bar a.o.)-CodePudding

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>

CodePudding user response：

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.