Javascript HTML 5 Progress Bar not working with setInterval

Question

• The progress bar increases by 1 when I press the button. But I do not see this increase to 100. I need to press the button again and again to increase the value. Could you tell me what I can do wrong?
• Also, how to clear the interval for each individual progress bar after reaching 100 without using the progress bar identifier?

window.onload = function() { console.log("Hello"); var button = document.getElementById("animateButton"); button.onclick = goProgress; } function goProgress() { console.log("In goProgress()"); var progressBars = document.getElementsByClassName("progress"); for(var i=0;i<progressBars.length;i++){ console.log("Progress Bar " + (i+1) + ": " + progressBars[i]); setInterval(increaseVal(progressBars[i]),10); } }; function increaseVal(progressBar){ console.log("In increaseVal(): " + progressBar.value); if(progressBar.value<100){ progressBar.value = progressBar.value + 1; } } 

 <progress class="progress" value="20" max="100"></progress> <br> <progress class="progress" value="0" max="100"></progress> <br> <progress class="progress" value="30" max="100"></progress> <br> <br> <input type="button" value="Animate" id="animateButton"/> 

Answer 1

setInterval takes a function as the first parameter, you actually call the function, you only need to pass a link.

In accordance with the documentation, any parameters after a delay will be transferred to the function.

 setInterval(increaseVal, 10, progressBars[i]); 

To clear the interval when it reaches 100, you will save intervalId, the easiest one will probably just write it to the progress bar.

 progressBars[i].interval = setInterval(increaseVal, 10, progressBars[i]); // snip function increaseVal(progressBar){ console.log("In increaseVal(): " + progressBar.value); if (progressBar.value < 100) { progressBar.value = progressBar.value + 1; } else { clearInterval(progressBar.interval); } } 

You could also store them in a custom array, but then you have to pass the index of the array to the function.

Check out jsfiddle here

Answer 2

With setInterval() you can pass the parameters to the function you want to call again as arguments after a delay. Then you can use the array to hold the clearInterval pens for each item with clr[i] = setInterval(increaseVal, 10, progressBars[i],i); :

Example:

 window.onload = function() { console.log("Hello"); var button = document.getElementById("animateButton"); button.onclick = goProgress; } var clr = []; function goProgress() { console.log("In goProgress()"); var progressBars = document.getElementsByClassName("progress"); for (var i = 0; i < progressBars.length; i++) { console.log("Progress Bar " + (i + 1) + ": " + progressBars[i]); clr[i] = setInterval(increaseVal, 10, progressBars[i],i); } }; function increaseVal(progressBar,i) { console.log("In increaseVal() " + i + ": " + progressBar.value); if (progressBar.value < 100) { progressBar.value = progressBar.value + 1; } else { clearInterval(clr[i]) } } 

 <progress class="progress" value="20" max="100"></progress> <br> <progress class="progress" value="0" max="100"></progress> <br> <progress class="progress" value="30" max="100"></progress> <br> <br> <input type="button" value="Animate" id="animateButton" /> 

Answer 3

You call function in the place where you need to pass it as a reference . Therefore, pass the link to the increaseVal function, linking its parameter.

 for (var i = 0; i < progressBars.length; i++) { setInterval(increaseVal.bind(null, progressBars[i]), 10); } 

Demo

Full code for cleaning interval . You can use the dataset of the progress bar element to complete your tasks. There is no need to enter any new variables into the code.

 window.onload = function() { console.log("Hello"); var button = document.getElementById("animateButton"); button.onclick = goProgress; function goProgress() { console.log("In goProgress()"); var progressBars = document.getElementsByClassName("progress"); for (var i = 0; i < progressBars.length; i++) { progressBars[i].dataset.interval = setInterval(increaseVal.bind(null, progressBars[i]), 10); } }; function increaseVal(progressBar) { if (progressBar.value < 100) { progressBar.value = progressBar.value + 1; } else { clearInterval(progressBar.dataset.interval); console.log(progressBar, "cleared!!"); } } } 

Demo