Cannot add event listener to array elements

Question

I want to add mouseover event to every link with linkLink class with JS. Console gives an error - Cannot read property style of undefined. Whenever I set index manualy like - l[0].addEventListener(...) it works fine, but not with variable i. Any help?

var l = document.getElementsByClassName('linkLink');

for (var i = 0; i < l.length; i++) {
    l[i].addEventListener("mouseover", function() { l[i].style.backgroundColor = "black"; });
        if ((i % 2) === 0) l[i].style.color = "crimson";
        else l[i].style.color = "gold";
}

<a class="linkLink" href="#">link I</a><br>
<a class="linkLink" href="#">link II</a><br>
<a class="linkLink" href="#">link III</a><br>

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Teemu, Dec 16 '17 at 12:00

Mamun · Accepted Answer · 2017-12-16T15:19:55.750

Use this instead of li[i] in the handler function.

var l = document.getElementsByClassName('linkLink');

for (var i = 0; i < l.length; i++) {
    l[i].addEventListener("mouseover", function() { this.style.backgroundColor = "black"; });
    //return back to original background color on mouseleave.
    l[i].addEventListener("mouseleave", function() { this.style.backgroundColor = "white"; });
    if ((i % 2) === 0) l[i].style.color = "crimson";
    else l[i].style.color = "gold";
};

<a class="linkLink" href="#">link I</a><br>
<a class="linkLink" href="#">link II</a><br>
<a class="linkLink" href="#">link III</a><br>

Cannot add event listener to array elements

1 Answers1