CODEWITHSUNDEEP
javascripthtml
Luke To
Luke To

Reputation: 113

Javascript/HTML - Hide DIV until button click

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 complete";
  }
}
<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>

Upvotes: 2

Views: 1226

Answers (4)

TechySharnav
TechySharnav

Reputation: 5084

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 complete";
  }
}

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>

Upvotes: 2

Not A Robot
Not A Robot

Reputation: 2694

  1. Hide your status class initially.
.status {
   display: none;
}
  1. 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.

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

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

  1. 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 complete";
  }
}
.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>

Upvotes: 3

connexo
connexo

Reputation: 56754

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 complete";
  }
}
.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.

Upvotes: 3

Sudarshan
Sudarshan

Reputation: 814

Add line in javascript function


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

add style in html

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

.....

Upvotes: 2

Related Questions