How does 'this' work in a for loop?

Question

I am confused why Javascript shows different behaviour when I use a looped element vs this keyword in a simple for loop. For example, when I run following loop, it gives error: cannot read property innerHTML of undefined

//get a handle on all digits
var digits = document.getElementsByClassName("digit");
for(var i=0; i<digits.length; i++) {
    digits[i].addEventListener("click", function() {
        var number = digits[i].innerHTML;    //error here
        console.log(number);
    })
}

But when I replace digits[i] with this, it works fine. My question is, what is different in the second case? (with this)

//get a handle on all digits
var digits = document.getElementsByClassName("digit");
    for(var i=0; i<digits.length; i++) {
        digits[i].addEventListener("click", function() {
            var number = this.innerHTML;    //this works as expected
            console.log(number);
        })
    }