I want to hide the div "status" until the button is clicked. How can I achieve this from within my js?

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 5500) {
    status.innerHTML = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}

<div class="status">
  <progress id="progressBar" value="0" max="5500" style="width:100%;"></progress>
  <span id="status"></span>
  <br>
  <center>Generating event...</center>
</div>

<center><button style="margin-top: 20px;" class="btn btn-success" onclick='start(0)'>Submit</button></center>

I want to hide the div "status" until the button is clicked. How can I achieve this from within my js?

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 5500) {
    status.innerHTML = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}

<div class="status">
  <progress id="progressBar" value="0" max="5500" style="width:100%;"></progress>
  <span id="status"></span>
  <br>
  <center>Generating event...</center>
</div>

<center><button style="margin-top: 20px;" class="btn btn-success" onclick='start(0)'>Submit</button></center>

• javascript
• html

Share Improve this question Follow edited Apr 30, 2021 at 10:24 Not A Robot 2,69222 gold badges1919 silver badges3737 bronze badges asked Apr 30, 2021 at 10:23 Luke ToLuke To 11377 bronze badges 2

• 2 put default style as - display : none and then inside start change it as display : block – KcH Commented Apr 30, 2021 at 10:28
• Please check my answer for a lot of don't do this do that information. All the advice is based on mon best practices. – connexo Commented Apr 30, 2021 at 10:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

There is no need to work with inline styles or create your own CSS classes for the task. Any HTML element has a hidden property and attribute available (which sync), and every browser has user agent default styles like this:

[hidden] { display: none; }

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('button.btn.btn-success')
    .addEventListener('click', () => start(0));
})

function start(al) {
  document.querySelector('div.status').hidden = false;
  const bar = document.getElementById('progressBar');
  const status = document.getElementById('status');
  status.textContent = al + "%";
  bar.value = al;
  al++;
  const sim = setTimeout(() => start(al), 1);
  if (al == 5500) {
    status.textContent = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    document.getElementById('finalMessage').textContent = "Process is plete";
  }
}

.btn.btn-success {
  display: block;
  margin: 20px auto 0;
  width: fit-content;
}

#progressBar {
  width: 100%;
}

<div class="status" hidden>
  <progress id="progressBar" value="0" max="5500"></progress>
  <span id="status"></span>
  <br>
  <center>Generating event...</center>
  <div id="finalMessage"></div>
</div>

<button class="btn btn-success">Submit</button>

There is several other improvements that I made:

• You shouldn't use innerHTML to set text content. Use textContent instead.
• Use const and let instead of var.
• Don't use setTimeout with a string as first parameter. Instead, pass a function that makes the call you want.
• Don't use inline styles. Instead, use CSS selectors and external CSS to style your elements.
• Don't use presentational, deprecated tags like center. Let CSS do the visual stuff.
• Don't use inline event listeners. Instead, wait until the DOM is ready (DOMContentLoaded event occurs), then use addEventListener() to register event handlers.

1. Hide your status class initially.

.status {
   display: none;
}

2. When the button is pressed, using JavaScript, un-hide the status class

document.querySelector(".status").style.display = "block";

Some improvements in your code:

1. Try to avoid having the same name for the class and the id.

In your code, status is both class and id.

I have changed it to status-of-progress-bar in the below code.

2. finalMessage was not used as ID in your HTML, so added to <center> tag

NOTE: center tag is now not remended, and many browsers may not support it in the future.

3. Using .disabled property, we can disable the button when user has pressed it once, so that user cannot press the button again.

function start(al) {
  document.querySelector(".btn").disabled = true;
  document.querySelector(".status").style.display = "block";
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status-of-progress-bar');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 5500) {
    status.innerHTML = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}

.status {
 display: none;
}

<div class="status">
  <progress id="progressBar" value="0" max="5500" style="width:100%;"></progress>
  <span id="status-of-progress-bar"></span>
  <br>
  <center id="finalMessage">Generating event...</center>
</div>

<center><button style="margin-top: 20px;" class="btn btn-success" onclick='start(0)'>Submit</button></center>

You need to use CSS, to default visibility to hidden. Then, use JS to make the div visible.

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 5500) {
    status.innerHTML = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}

let btn = document.querySelector(".btn")

btn.addEventListener("click", function show(e) {
  start(0); document.querySelector(".status").style.visibility = "visible";
  btn.removeEventListener("click", show);
}, {once:true});

.status {
  visibility: hidden;
}

<div class="status">
  <progress id="progressBar" value="0" max="5500" style="width:100%;"></progress>
  <span id="status"></span>
  <br>
  <center>Generating event...</center>
</div>

<center id="finalMessage"><button style="margin-top: 20px;" class="btn btn-success" >Submit</button></center>

Add line in javascript function

function start() {
        document.getElementsByClassName("status")[0].style.display = "block"
......
}

add style in html

<div class="status" style = "display:none ">

.....