How to pass a parameter to a dynamically set Javascript function?

Question

Ok, I have one Javascript that creates rows in a table like this:

  function AddRow(text,rowID) 
  {
    var tbl = document.getElementById('tblNotePanel');
    var row = tbl.insertRow(tbl.rows.length);

    var cell = row.insertCell();
    var textNode = document.createTextNode(text);
    cell.id = rowID;
    cell.style.backgroundColor = "gold";

    cell.onclick = clickTest;

    cell.appendChild(textNode);
  }

In the above function I set the cell's "onclick" function to call another Javascript function called "clickTest". My question is, when I assign the "onclick" event to call "clickTest", how do I set parameter information to be sent when the "clickTest" method is called on the cell's "onclick" event? Or, how do I access the cell's ID in the "clickTest" function?

Thanks, Jeff

Answer 1

In the clickTest function you should have access to a the this variable. Try this inside of clickTest function:

alert(this.id);

This will refer to the DOM element that fired the event.

Basically, there isn't really a way to pass parameters to an event handler function. The reason for that is that the browser is executing the function based on an event and you are not actually calling the function.

You can use closures which allow you to access local variables (to the closure) when you assign the event handler function. That would look like this:

cell.onclick = function() { alert(this.id); alert(cell.id); };

Were cell.id is the locally scoped variable that is still considered in scope when the event handler is executed.

Answer 2

Try this:

cell.onclick = function() { clickTest(rowID); };

The idea is that you are binding the onclick handler to the anonymous function. The anonymous function calls clickTest with rowID as the parameter.