CODEWITHSUNDEEP
javascripthtml
Jack
Jack

Reputation: 753

for loop in JavaScript not working

I have a code for the progress bar and I want the progress bar repeat itself 10 times,in other words going from 0% to 100%, 10 times. I have created a for loop but the code only runs the ProgressBarSim function once.

Here is script:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
  <script>
     var sim;
     var mm=0;
     for (i = 0; i < 10; i++) {
         var al=0;
         var t=0;
         function progressBarSim(al, t) {
            var bar = document.getElementById('progressBar');
            var status = document.getElementById('status');
            bar.value = al;
            status.innerHTML = al + "%";
            al++;
            sim = setTimeout(function(){ progressBarSim(al, t); }, 50);
            if (al == 101) {
               clearTimeout(sim);
               var al=0;
               var t=0;
            }//end if 
         }//end function
      }//end for

  </script>

  <form  name="Calculation" method="post">

  <progress id="progressBar" value="0" max="100" style="width:300px;">  </progress>
   <span id="status"></span> 
  <input type="button" id="btn2" value="Start Acquisition" onclick="progressBarSim(0, 0)">

  </form>
</body>
</html>

How can I make it to repeat itself?

Upvotes: -1

Views: 116

Answers (2)

Pete
Pete

Reputation: 58432

I don't see the need for your for loop (as this is what the setTimeout does) and I'm not sure what your t variable does as you don't seem to use it anywhere (may want to get rid of it) but you can change your js to the following and it should work:

function progressBarSim(al, t) {
    var bar = document.getElementById('progressBar');
    var status = document.getElementById('status');

    bar.value = al;
    status.innerHTML = al + "%";

    al++;

    // this will call iteself up until 100 as you are passing the al var back to the same function and iterating it
    if (al < 101) {
        setTimeout(function () {
            progressBarSim(al, t); // as you are calling the function within itself, it is creating it's own loop
        }, 50);
    }
}

Example

I think you are confusing setTimeout and setInterval.

setTimeout will call the function once after the specified amount of time has passed, you wouldn't need to do a clearTimeout unless you wanted to cancel that event happening after it is called but before the elapsed time has passed.

setInterval will call the function continuously, pausing the for the amount of time specified, between each function call. Here clearInterval will stop the looping

Update as per comments and figuring out what t is for

var timesToRepeat = 10,
    timer;

function progressBarSim(al, t) {
    clearTimeout(timer); // added incase the button is clicked twice
    var bar = document.getElementById('progressBar');
    var status = document.getElementById('status');

    bar.value = al;
    status.innerHTML = al + "%";

    al++;

    // this will call iteself up until 100 as you are passing the al var in and iterating it
    if (al <= 101 && t < timesToRepeat) {
        if (al == 101) {
            al = 0;
            t++;
        }

        if (t < timesToRepeat) {
            timer = setTimeout(function () {
                progressBarSim(al, t);
            }, 50);
        }
    }
}

Updated example

Upvotes: 4

krato
krato

Reputation: 1246

I'm assuming mm variable is the counter to how many times you want to run it. if (mm < 10) checks if it is already run 10 times.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <script>
    var sim;
    var mm=1;
    function progressBarSim(al, t) {
            var bar = document.getElementById('progressBar');

            var status = document.getElementById('status');

            bar.value = al;

            status.innerHTML = al + "%";

            al++;
            sim = setTimeout(function(){ progressBarSim(al, t); }, 50);

            if (al == 101) {

                clearTimeout(sim);

                var al=0;
                var t=0;
                if(mm < 10)
                    progressBarSim(0, 0);
                mm++;
            }
        }


    </script>

    <form  name="Calculation" method="post">

    <progress id="progressBar" value="0" max="100" style="width:300px;">  </progress>
    <span id="status"></span>
    <input type="button" id="btn2" value="Start Acquisition" onclick="progressBarSim(0, 0)">

    </form>
</body>
</html>

Upvotes: 1

Related Questions