Add events in for loop

Question

I'd like to change the innerText of each <p> to * with a mouseover event.

HTML

<p id="object1">O</p>
<p id="object2">O</p>
<p id="object3">O</p>

I wrote a script, but it affects only the last <p>. What is wrong in my script? I would be grateful for a help.

JavaScript

var nodeList = document.getElementsByTagName('p');

for (var i = 0; i < nodeList.length; i++) {
    var obj = Utility.$(nodeList[i].id);
    obj.addEventListener('mouseover', function () {
        obj.innerHTML = '*';
    }, false);
}

Possible duplicate of [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — SeinopSys, Oct 11 '15 at 11:42
It's a little bit too much to explain closures here. Of course it would help to understand the issue, but for this case it's enough to explain that the event handler brings the affected element via `event.target` as argument IMO. — timaschew, Oct 11 '15 at 11:52
or even better, that the context `this` within the handler is a different one than the context of the loop. The context within a event handler is exactly `event.target`. — timaschew, Oct 11 '15 at 12:01

score 1 · Accepted Answer · answered Oct 11 '15 at 11:45

You should use the event argument in the event handler, otherwise obj is the last assignent (assigned in the loop).

And you don't need any Utility helper

var nodeList = document.getElementsByTagName('p');

for(var i = 0; i < nodeList.length; i++)
{ 
    var obj = nodeList[i];
    obj.addEventListener('mouseover', function(e){
        e.target.innerHTML = '*';
    }, false);
}

http://jsfiddle.net/002efeht/

Add events in for loop

1 Answers1