Dom scripting event handler with Parameter? Options

[Myron Schabe]

Hi,

Want I want to know is the syntax for domscripting if you want to assign an event to a button, for example, that has parameters in the function. I already know how to do it if the function has no parameters -- (see the following code sample and there is a function called myFunction()). But what is the syntax if myFunction has parameters i.e. myFunction(rowNum, personId, etc, etc2)?


var button = document.getElementById("buttonName");
button.onclick = myFunction; //example of call with no parameters.

Thanks very much!

[Christian J]

You can use an anonymous function and then put the function call inside it:

CODE

button.onclick=function()
{
      myFunction(rowNum, personId, etc, etc2);
}

[Myron Schabe]

Thanks very much though this won't actually solve my problem as what I need to pass is a row index as I am building like a tree/table widget -- so based upon the user click of a particular node I need to pass that clicked index to the function -- since the index is based upon a user click I am not sure how to solve this - unless there is some way to update a global variable based upon a user click. So I guess that is my second question - how could I update a global variable based on a user click that could be used by my function that I am attaching to the dynamically built nodes.

Or if anyone knows of any prebuilt tree/table type structures I could look at those.

Thanks very much!

[Christian J]

If I understood you correctly you might give the node a custom attribute, called "foo" in this example:

CODE

function myFunction(str)
{
    alert(str); // should display the string "bar"
}

var button=document.getElementById('button');
button.foo='bar';
button.onclick=function()
{
      myFunction(button.foo);
}

As a practical example, here's a snippet from a table script where each TR element is given the attribute "row_index", and each row's TD element is given the attribute "column_index":

CODE

// detect cursor position
for(var i=0; i<table.rows.length; i++)
{
    table.rows[i].row_index=i;
    for(var j=0; j<table.rows[i].cells.length; j++)
    {
        table.rows[i].cells[j].column_index=j;
        table.rows[i].cells[j].onmouseover=function()
        {
            highlight(this.parentNode.row_index, this.column_index, 'on');
        }
        table.rows[i].cells[j].onmouseout=function()
        {
            highlight(this.parentNode.row_index, this.column_index, 'off');
        }
    }
}

Nit-pick: making up custom attributes with javascript might technically be non-standard HTML, but since it's only visible in the browser's javascript engine maybe one doesn't have to make a custom DTD for it. Not sure about XHTML though.