JS: error with for-loop in adding event listerners [duplicate]

This question already has an answer here:

• JavaScript closure inside loops – simple practical example 23 answers

I do not want to manually add an event listener to each button, but when I use for-loop the elements that I stored inside elementArray become undefined. Please help!

Here's my code:

<button id="red">Red button</button>
<button id="green">Green button</button>
<button id="normal">Normal button</button>
<script type="text/javascript"> 
    var div = document.getElementById("div");
    var redBtn = document.getElementById("red");
    var greenBtn = document.getElementById("green");
    var normalBtn = document.getElementById("normal");

    redBtn.color = "red";
    greenBtn.color = "green";
    normalBtn.color = "normal";

    var elementArray = [redBtn, greenBtn, normalBtn];

    for (var i = 0; i < elementArray.length; i++) {
        elementArray[i].addEventListener("click", function() {
            console.log(elementArray[i].color);
        }, false);
    } 
</script>