I've been searching all over the place and even if I have found the answer, it has not been delivered in terms I can understand. I'm playing around with this code on jsfiddle, trying to understand why this click handler is not working. I apologize if this is a useless post, just trying to make sense of it all. If anyone knows any good tutorials on how JavaScript code is rendered and how functions pass objects etc.. please, do link me! I've read the basics of how to write functions etc.. but understanding whats going on when the code is parsed, to me, is quite a different thing.
Here is the code I'm trying to get to work:
http://jsfiddle.net/UumUP/3144/
// Function to change the content of t2
function modifyText(evt) {
var thing = evt.target;
thing.firstChild.nodeValue = "four";
}
// add event listener to t
var el = document.getElementsByTagName("td");
for(i = 0; i < el.length; i++) {
el[i].addEventListener("click", modifyText(evt), false);
}
You are calling the function and passing the result of that call, rather than passing a reference of the function, do this instead:
el[i].addEventListener("click", modifyText, false);