title: Javascript increment not working
body: <p>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. </p>
  
  <p>Here's what im trying to do. </p>
  
  <p>Create a simple <code>&lt;meter&gt;</code> 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.</p>
  
  <p>JavaScript.</p>
  
  <pre><code>for (var i = 0; i &lt;= 10; i++) {
      var a = document.getElementById("mtr1");
      setTimeout(function () {
          console.log(i);
          a.value = i;
      }, 250);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>What interested me was the value of <code>i</code> that i got in the console. I got instances of <code>10</code>, instead of 1,2,3...10. </p>
  
  <p>Why does this happen?</p>
  
  <p><a href="http://jsfiddle.net/Qh6gb/2/" rel="nofollow">FIDDLE</a></p>