I need help adding a button to perform this HTML code

Question

I need help to add my HTML code to a button. For example, when I press the button, my code starts.

 function progressBarSim(al) { var bar = document.getElementById('progressBar'); var status = document.getElementById('status'); status.innerHTML = al + "%"; bar.value = al; al++; var sim = setTimeout("progressBarSim(" + al + ")", 300); if (al == 100) { status.innerHTML = "100%"; bar.value = 100; clearTimeout(sim); var finalMessage = document.getElementById('finalMessage'); finalMessage.innerHTML = "Process is complete"; } } var amountLoaded = 0; progressBarSim(amountLoaded); 

 <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status"></span> <h1 id="finalMessage"></h1> 

Answer 1

These are two different things: html code & scripting code. So I think it is better to behave differently with each of them. I guess you want to show progress bar when a button is clicked. If I'm right, then you can wrap progress bar html code with a div tag and set its display style to none - <div style="display:none">...</div> . Then add all script in a function ex startProgress and add one line of code at top of your function to change div display style to block . It must look something like this:

<div id="divProgbar" style="display:none">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status"></span> <h1 id="finalMessage"></h1>
</div>
<script>
function startProgress(){
document.getElementById('divProgbar').style.display='block';
function progressBarSim(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al+"%";
  bar.value = al;
  al++;
 var sim = setTimeout("progressBarSim("+al+")",300);
 if(al == 100){
   status.innerHTML = "100%";
   bar.value = 100;
   clearTimeout(sim);
   var finalMessage = document.getElementById('finalMessage');
   finalMessage.innerHTML = "Process is complete";
 }
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
}
<script>
<button onclick="javascript:startProgress(); return false;">Start progress</button>