CODEWITHSUNDEEP
javascripthtml
Jack
Jack

Reputation: 753

Calling a javascript function

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

Upvotes: 0

Views: 126

Answers (6)

anupshrestha
anupshrestha

Reputation: 236

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>

Upvotes: 1

Roc
Roc

Reputation: 76

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>

Upvotes: 1

SK.
SK.

Reputation: 4358

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

Upvotes: 0

lingo
lingo

Reputation: 1908

Remove function like onclick="ProgressBarSlim()"

Upvotes: 0

smk
smk

Reputation: 5932

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

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

Upvotes: 1

depperm
depperm

Reputation: 10756

Change

onclick="function   progressBarSim()"

to

onclick="progressBarSim()"

Upvotes: 0

Related Questions