I'm trying to make a counter that goes up to 100 in 10 seconds and then loops. What is wrong with my code?
window.onload = function () {
var showPercent = window.setInterval(function () {
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
document.getElementById('result').innerHTML = currentPercent;
}, 100);
};
Xotic750
23.6k8 gold badges59 silver badges81 bronze badges
asked Feb 27, 2014 at 23:24
Christopher Reid
4,4914 gold badges41 silver badges82 bronze badges
4 Answers 4
You're not declaring currentPercent anywhere on your code, you should add something like: var currentPercent = 0; before showPercent
answered Feb 27, 2014 at 23:27
DarkAjax
16.3k11 gold badges60 silver badges67 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Niet the Dark Absol
Wow, five seconds XD +1
DarkAjax
@NiettheDarkAbsol you're pretty fast I was just lucky this time :)
var currentPercent = 0;
setInterval(function() {
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
document.getElementById('result').innerHTML = currentPercent;
}, 100);
answered Feb 27, 2014 at 23:33
im_nullable
5751 gold badge6 silver badges17 bronze badges
Comments
In your fiddle you already had it to run onload. The problem with your snippet is that currentPercent needs to exist outside the setInterval callback scope:
var currentPercent = 0;
var showPercent = window.setInterval(function() {
if (currentPercent < 100) {
++currentPercent;
} else {
currentPercent = 0;
}
document.getElementById('result').innerHTML = currentPercent;
}, 100);
Comments
I got the following error when loading the page in Firefox with Firebug enabled:
ReferenceError: currentPercent is not defined
You're comparing the value stored in variable currentPercent against '100', but the variable hasn't been defined yet. Making a couple of small alterations to the code makes it work just fine:
var currentPercent = 0;
window.onload = function() {
var showPercent = window.setInterval(function() {
if (currentPercent < 100) {
currentPercent += 1;
}
document.getElementById('result').innerHTML = currentPercent;
}, 100);
};
Comments
lang-js
varconsoleand you will seeUncaught ReferenceError: currentPercent is not definedwindow.onloadafter the page was already loaded (the jsFiddle is set up to run the JavaScript "onLoad").no wrap - in <body>in your jsFiddle options.Security Considerationswhen using.innerHTML