function on each element of an array

[Chogori]

Can somebody explain me, why is necessary to write:

childTD[i].addEventListener("click", function(){changeColor(this);});

and not just:

childTD[i].addEventListener("click", changeColor(this));

Here is the whole code:

var ParentTable = document.getElementById("mytable");var childTD = ParentTable.getElementsByTagName("td");for(i=0;i<childTD.length;i++) {	childTD[i].addEventListener("click", function(){changeColor(this);});}function changeColor(element) {	element.style.backgroundColor="red";}

Thanks a lot!

[justsomeguy]

The first way assigns a function as the event handler that will call the changeColor function and pass it a value. The second way executes the changeColor function immediately and assigns the return value of that function as the event handler.

[Ingolme]

What value does "this" have in that context?

 

You probably should just use the event object that's passed to the function instead:

childTD[i].addEventListener("click", changeColor);

function changeColor(e) {  var element = e.target;  element.style.backgroundColor="red";}

[Chogori]

Ingolme, thanks, you are absolutly right!