Event Listener Scope question

Potential interview question. Why does the code not work as expected?

by Augustus Yuan

HTML

<!-- Click on each of the hello to trigger an alert -->
<!-- What is the expected output? Why does it behave that way -->
<!-- What is the fix? -->
<div id="hello1">Hello1</div>
<div id="hello2">Hello2</div>
<div id="hello3">Hello3</div>
<div id="hello4">Hello4</div>
<div id="hello5">Hello5</div>

JavaScript

window.onload = (function(e) {
    for (var i=1; i<=5; i++) {
        var el = document.getElementById('hello' + i);
        el.addEventListener('click', function(e) {
            alert(i);
        });    
    }
})();