Just adding var wouldn't be enough, you're still referencing the variable from the outer scope. You need to create your own copy. Instead of:

    els[i].addEventListener('click', function(){alert(i);});

Do:

    els[i].addEventListener('click',
        function() {
            var j = i;
            alert(j);
        });

Edit: This is wrong, archgoon has the correct answer below. That'll teach me for jumping on closure problems in the morning :)

That won't work either. You're still setting the variable to the global variable i. The only way I can think of doing this is as follows

els[i].addEventListener('click',function(k){function(){alert(k)}}(i));

EDIT: See lhorie's suggestion below for a much cleaner way of doing this. http://news.ycombinator.com/item?id=2124532

That won't quite work, as you're still just copying the value of i when that function is executed, which will be 4.

You could make the function take a parameter, then return a function which uses that parameter, or use currying.

Edit: I've posted a working version in my comment further down, http://news.ycombinator.com/item?id=2124559

I create a closure outside of the event registration: http://pastebin.com/igzWkgKF

I think you want var j = i outside the function.

Edit: Oops, this is wrong as well. :-)

alert('"'+i+'"')

Thats not the reason why it will alert 3 (it will alert 4, btw).

Here is a fix http://jsfiddle.net/hBe3c/

This is my thought also, but I'm unsure of how to lock in the correct integer value to the alert, such that clicking each li element pops up the correct number.

I'm guessing one would have to create an object with a scope that holds the right value, on each turn through the loop.

You're on the right track; they'll all print 4; but it's not because of the missing var keyword.

If you run the code you'll find that they all alert('4'). However, the third parameter of els.addEventListener() so you'll get an exception if you run the code verbatim.