Calling a javascript function

Question

I need to call a javascript function to run a progress bar, here is my code:

<form name="Calculation" method="post">
<progress id="progressBar" value="0" max="100" style="width:300px;"> </progress>
<span id="status"></span> 
<h1 id="finalMessage"></h1> 
<input type="button" id="btn2" value="Press me!" onclick="function progressBarSim(al)"/>
</form>
 <script>
function progressBarSim(al) {
 var bar = document.Calculation.getElementById('progressBar');
 var status = document.Calculation.getElementById('status');
 status.innerHTML = al + "%";
 bar.value = al;
 al++;
 var sim = setTimeout("progressBarSim(" + al + ")", 1);
 if (al == 100) {
 status.innerHTML = "100%";
 bar.value = 100;
 clearTimeout(sim);
 var finalMessage = document.getElementById('finalMessage');
 }
 }
 var amountLoaded = 0;
 progressBarSim(amountLoaded);
 </script>

The javascript function works on its own but I need to run it when the button is pressed and nothing happnes when I press the button "Press me".! any idea what's wrong? Thanks

• j08691: onclick="progressBarSim()", however what are you passing as the argument you have in your function? Also document.Calculation is incorrect. Use document.getElementById('progressBar')
• Jack: Calculation is the name of the form
• j08691: And there's no need at all to use it as you are using getElementById to reference the ID of your element.
• Jack: OK, I removed it but it did not solve my problem. The press button still does not work. Thank you though.

Answer 1

You need to call the function in "onclick", instead of writing "function progresBarSim()". Also, "document.Calculation.getElementById" produces a js error, you should write "document.getElementById". Try this:

<form name="Calculation" method="post">
<progress id="progressBar" value="0" max="100" style="width:300px;"> </progress>
<span id="status"></span> 
<h1 id="finalMessage"></h1> 
<input type="button" id="btn2" value="Press me!" onclick="progressBarSim(0)"/>
</form>
 <script>
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 + ")", 1);
 if (al == 100) {
 status.innerHTML = "100%";
 bar.value = 100;
 clearTimeout(sim);
 var finalMessage = document.getElementById('finalMessage');
 }
 }
 var amountLoaded = 0;
 progressBarSim(amountLoaded);
 </script>

• Jack: It works, thank you. But why the argument is zero?? progressBarSim(0) instead of progressBarSim(al)
• Jack: Another question, the progress bar runs when I refresh the page. I want it to ONLY run when I press the button. Is is any way to correct this?
• j08691: Then don't call the function when the page loads (e.g. progressBarSim(amountLoaded);). I highly suggest you read some introduction to JavaScript tutorials.
• Roc: The zero argument means the progress bar starts from zero percent. To not let it run on page refresh, do what j08691 suggests and delete these lines: var amountLoaded = 0; progressBarSim(amountLoaded); Learning some basic JavaScript will help you a lot:)

Answer 2

I fiddled around with the code and changed few stuff, try the following code:

<form name="Calculation" method="post">
 <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
 <span id="status"></span> 
 <h1 id="finalMessage"></h1> 
 <input type="button" id="btn2" value="Press me!" onclick="progressBarSim(0)"/>
</form>
<script>
 function progressBarSim(al) {
 var bar = document.getElementById('progressBar');
 var status = document.getElementById('status');
 status.innerHTML = al + "%";
 bar.value = al;
 al++;
 var sim = setTimeout(function(){ progressBarSim(al); }, 1);
 if (al == 100) {
 status.innerHTML = "100%";
 bar.value = 100;
 clearTimeout(sim);
 var finalMessage = document.getElementById('finalMessage');
 }
}
</script>

Answer 3

Change

onclick="function progressBarSim()"

to

onclick="progressBarSim()"

Answer 4

Replace <input type="button" id="btn2" value="Press me!" onclick="function progressBarSim()"/> with

<input type="button" id="btn2" value="Press me!" onclick="progressBarSim()"/>

• Jack: Doesn't work, and yes there is one argument al that should be defined.

Answer 5

Remove function like onclick="ProgressBarSlim()"

Answer 6

Replace onclick="function progressBarSim()" with onclick="progressBarSim()"

Like this:

<input type="button" id="btn2" value="Press me!" onclick="function progressBarSim()"/>

After replaced

<input type="button" id="btn2" value="Press me!" onclick="progressBarSim()"/>