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

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

Roc · Accepted Answer · 2015-07-23 16:56:17Z

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>

answered Jul 23, 2015 at 16:56

Roc

761 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jack Over a year ago

It works, thank you. But why the argument is zero?? progressBarSim(0) instead of progressBarSim(al)

Jack Over a year ago

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 Over a year ago

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 Over a year ago

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:)

anupshrestha · Accepted Answer · 2015-07-23 17:11:34Z

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>

depperm · Accepted Answer · 2015-07-23 16:25:16Z

0

Change

onclick="function   progressBarSim()"

to

onclick="progressBarSim()"

answered Jul 23, 2015 at 16:25

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Comments

smk · Accepted Answer · 2015-07-23 16:25:42Z

0

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

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

answered Jul 23, 2015 at 16:25

smk

5,9726 gold badges30 silver badges41 bronze badges

1 Comment

Jack Over a year ago

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

lingo · Accepted Answer · 2015-07-23 16:26:29Z

0

Remove function like onclick="ProgressBarSlim()"

answered Jul 23, 2015 at 16:26

lingo

1,9086 gold badges29 silver badges57 bronze badges

Comments

SK. · Accepted Answer · 2015-07-23 16:28:39Z

0

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()"/>

answered Jul 23, 2015 at 16:28

SK.

4,3885 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Calling a javascript function

6 Answers 6

4 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related