adding events

[garry27]

hi

 

i'm trying to dynamically add an on click event to a row. it needs to pass a 'this' variable to a function to specify the node that sent it. what's the best way to go about this?

 

 

[fenway]

I'm not sure what you mean... how would it be any different than a non-dynamic one?

[garry27]

i have table which i add rows to in js and i want each row to contain an event that links it to a function. i'm trying to use the onclick event but it won't pass a parameter. i get 'missing formal parameter' in firebug. here's the code i have:

 

...
        var row = document.createElement("tr");
        row = onClick = thisRow(this);
...

function thisRow(x){
  whichrow.style.backgroundColor='transparent';
  whichrow = x;
  whichrow.style.backgroundColor='yellow';
}

[garry27]

sorry,the previous function should have read:

 

function thisrow(x){
  if (whichrow) whichrow.style.backgroundColor='transparent'
  whichrow = x
  whichrow.style.backgroundColor='yellow'
}

 

 

[fenway]

Don't you mean row.onclick = "thisrow(this)"?

[garry27]

ye, that's what i meant

[fenway]

So it still doesn't work?

[garry27]

its not sending the row reference. the alert function in thisRow() says [object window]

[fenway]

I didn't know you could get a "row" reference....

[garry27]

i'm using innerhtml now to add events to row elements. it takes longer this way because you have to rebuild the table each time you add or remove any rows but it does the job.

 

with the following tr tag, the onclick event passes a reference of the position of that row to the thisRow function.

 

<tr onclick='thisRow(this)'><td>

 

then you can do whaterver you like with it. i.e:

 

function thisRow(x){
  x.className='selrow';
}

 

i hope i've helped.

 

thanks by the way for figuring out that awkward link i was trying to ouput in js.

[Zeon]

it's better without innerHTML, you just used it wrong.

...
        var row = document.createElement("tr");
        row.onclick =  function(){thisRow(this)}; //  <---
...

function thisRow(x){
  whichrow.style.backgroundColor='transparent';
  whichrow = x;
  whichrow.style.backgroundColor='yellow';
}

 

it should work just fine.

 

Cheers.

[fenway]

Right... function... I knew it looked funny.

[ozfred]

Right... function... I knew it looked funny.

 

If all you want is a reference back to the element that fired the event, you don't need to pass any paramters:

 

  ...
  thisrow.onclick = foo;
  ...

function foo(){
  var thisrow = this;
}

 

foo's this keyword will be set as a reference to the element that called it.

 

 

--

Fred

Javascript FAQ: <URL: http://www.jibbering.com/faq/ >