Javascript increment not working

Question

Well I did not know what exactly would be a good title for this because it is a most peculiar situation or I'm abnormally dumb.

Here's what im trying to do.

Create a simple <meter> tag which is new in HTML5. The main issue is with my javascript. Im trying to increment the value of the meter tag gradually in my javascript. But somehow it doesn't work the way i want.

JavaScript.

for (var i = 0; i <= 10; i++) {
    var a = document.getElementById("mtr1");
    setTimeout(function () {
        console.log(i);
        a.value = i;
    }, 250);
}

I'm trying to increase the value of the meter gradually every 250 ms.This doesn't happen. Instead the meter jumps straight to 10.

What interested me was the value of i that i got in the console. I got instances of 10, instead of 1,2,3...10.

Why does this happen?

FIDDLE

Answer 1

It's a JavaScript closures' classic. Here i is an actual reference to the variable, not its copy. After you've iterated through the loop it has the value of 10, that's why all log invocations write 10 to log.
This should work better:

for (var i = 0; i <= 10; i++) {
    var a = document.getElementById("mtr1");
    setTimeout(function (i) {
        return function() {
            console.log(i);
            a.value = i;
        };
    }(i), 250 * i);
}

Here the most inner i is the setTimeout's callback argument, not the variable which you've declared in the loop body.