for loop in JavaScript not working

Question

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?

don't you just put the entire for loop inside another for loop? — krato
– krato, Commented Aug 12, 2015 at 13:32
From what I read the function has to be inside the for loop. — Jack
– Jack, Commented Aug 12, 2015 at 13:33
You want to follow Pete's advice down below because you are declaring a function named progressBarSim during every iteration of the for loop. But to answer why this isn't working it is because you never actually call progressBarSim you just declare it 10 times. — DWB
– DWB, Commented Aug 12, 2015 at 13:40

Pete · Accepted Answer · 2015-08-12 14:18:08Z

4

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

edited Aug 12, 2015 at 14:18

answered Aug 12, 2015 at 13:37

Pete

58.8k31 gold badges132 silver badges188 bronze badges

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

3 Comments

Jack Over a year ago

I want the progress bar to start from zero when it reaches 100% and repeat it self.

Jack Over a year ago

I have changed var al=0; var t=0; to progressBarSim(0, 0); and it is working now.

Pete Over a year ago

okay, I see what t is for now, so if you check this, you can change what timesToRepeat to the number of times you want it to repeat: jsfiddle.net/9rdv9jdj/5

krato · Accepted Answer · 2015-08-12 13:47:33Z

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>

Collectives™ on Stack Overflow

for loop in JavaScript not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related