I'm trying to do a simple onclick to child elements (without jQuery):

document.getElementById('link').children.onclick = function(){
    this.style.color="#ff0000";
}

I want it to change the color to red for each element clicked. I would assume this method would work but it won't.

I'm trying to do a simple onclick to child elements (without jQuery):

document.getElementById('link').children.onclick = function(){
    this.style.color="#ff0000";
}

I want it to change the color to red for each element clicked. I would assume this method would work but it won't.

• javascript
• onclick

Share Improve this question Follow edited Mar 17, 2014 at 7:12 Gaurang Tandon 6,8191111 gold badges5151 silver badges9595 bronze badges asked Mar 17, 2014 at 7:08 Matt CoadyMatt Coady 3,86677 gold badges4343 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This should work:

var childs = document.getElementById('link').children; //returns a HTMLCollection

for (var i = 0; i < childs.length; i++) { // iterate over it
    childs[i].onclick = function () {   // attach event listener individually
        this.style.color = "#ff0000";
    }
}

Demo

document.getElementById('someID').children returns a HTMLCollection, so you were adding a onclick to a HTMLCollection, which turns out to be wrong.

You have to use a loop, if you don't want to introduce new variables, you could do:

[].forEach.call(document.getElementById('link').children, function(e) {
    e.onclick = function () {
        this.style.color = "#ff0000";
    }
});

The WORKING DEMO.