cannot read property style of undefined error

Question

I am getting a cannot read property style of undefined error, and I am not sure why it is returning undefined. I am attempting to have my elements change color on mouseover. The code I am using is:

var icons = document.getElementsByClassName('icon');
for ( i = 0; i < icons.length; i++) {
    console.log(icons.length);
    icons[i].addEventListener('mouseover', function() {
        console.log(icons[i]);
        icons[i].style.color = "#00FF00";
    });
};

EDIT: I was able to get it to work by doing the following:

var icon = document.getElementsByClassName('icon');

function getValue(i) {
    return (i);
}

for (var i = 0; i < icon.length; i++) {
    icon[i] = getValue(i);
    icon[i].addEventListener('mouseover', function() {
        this.style.backgroundColor = "#00FF00";
    });
    icon[i].addEventListener('mouseout', function() {
        this.style.backgroundColor = "white";
    });
}

Wrap the body of `for` in closure to keep separate copy of `i`. — Tushar, Nov 07 '15 at 16:04
@Tushar Or use event delegation like a normal human being. ;) — Madara's Ghost, Nov 07 '15 at 16:06
@Tushar Thought about that, wouldn't match the functionality described by the code (i.e. color doesn't wear off after unhovering). — Madara's Ghost, Nov 07 '15 at 16:07
@MadaraUchiha Right. Lets hope OP understands what's wrong in the code and how this issue can be solved. — Tushar, Nov 07 '15 at 16:09
@MadaraUchiha - `event delegation` sounds like a jQueery thing — Jaromanda X, Nov 07 '15 at 16:23
@JaromandaX event delegation is definitely not a jQuery thing. jQuery has event delegation, as does native DOM. — Madara's Ghost, Nov 07 '15 at 16:24
@MadaraUchiha - indeed, simple to write in jQueery, a little verbose in plain javascript for all but the simplest cases — Jaromanda X, Nov 07 '15 at 16:27
@JaromandaX Not really, it's a 6 line function to mock it up. `function on(selector, callback) { ... }` — Madara's Ghost, Nov 07 '15 at 16:43
@MadaraUchiha - I'll take your word for it :p - once I ever find a use for it, I'll probably realise how useful it is — Jaromanda X, Nov 07 '15 at 16:46
@JaromandaX https://jsfiddle.net/fyvv7Lna/ There, this works for most of what most people need. But I don't like having to deal with DOM directly in a web application anyway. I either abstract it away to my own controls, or I use a library like React to do it for me. — Madara's Ghost, Nov 07 '15 at 16:51
that indexOf should be `>= 0` surely :p (or `~[].indexOf.call...` FTW) — Jaromanda X, Nov 07 '15 at 16:55

cannot read property style of undefined error

0 Answers0