JavaScript last iteration set the value for all iterations

Question

var myElements = document.getElementsByName('bb1');
    for (var i = 0; i < myElements.length; i++) {
        var curValue = myElements[i].getAttribute('innerId')
        myElements[i].addEventListener('mouseover', function () {
            alert('Hello i am : ' + curValue);
        }, false);
    }

When mouse over, every element, instead of showing a different value for curValue, a constant value (the last iteration value) is displayed.

What am I doing wrong here?

Answer 1

There is no different scope inside blocks like for in JavaScript, so when your mouseover event is triggered, it will alert the current variable value which was set in the last iteration.

You can just use this inside your callback function to get the attribute of the object which the event was triggered.

var myElements = document.getElementsByName('bb1');
for (var i = 0; i < myElements.length; i++) {
    myElements[i].addEventListener('mouseover', function () {
        alert('Hello i am : ' + this.getAttribute('innerId'));
    }, false);
}