addEvent cycle problem

[luger_205]

Hi leds, I have following HTML code:

<h3 id="heading_xx">heading xx</h3>
<table id="table_xx">...</table>

<h3 id="nadpis_yy">heading yy</h3>
<table id="table_yy">...</table>

By clicking on the heading I need to slide(toggle) the coresponding table.

I have following code:

var allTabs = document.getElementsByTagName('table');
for(i=1; i<allTabs.length; i++) {                       // skipping the first table
  var aTab = allTabs[i];
  id_str = aTab.id.substring(7,aTab.id.length);         // id_str = xx OR yy

  var nadpis = $('heading_'+id_str);                    // found corresponding heading
  var tableid = 'table_'+id_str;                        // prepairing table id string

   nadpis.addEvent("click",function(){
			alert('id_str = '+tableid);     // I get ''table_yy'. If i put this line BEFORE addEvent, it works. But not here.
			$(tableid).slide('toggle');
		});
}

Yeah, its not exactly tuned, but it should work.
But what I am getting as 'tableid' on the last line is allways id of the last table. So no matter what heading i click, only the last table toggles.

Any ideas?
THX!

[johanafm]

After a quick glance and a gut feeling, I suspect this is due to the fact that the code being run when the event fires is not what the code looked like when you added the event, but what it looks like when your loop ends: i.e. all headers have the exactly same code in their event listeners.

Replace nadpis.addEvent with

addStaticEvent(nadpis, tableid);

And add the function addStaticEvent

function addStaticEvent(o, id) {
	o.addEvent("click",function(){
		alert('id_str = '+tableid);     // Now you should get whatever the string looked like at the time of the execution of this function
		$(tableid).slide('toggle');
}

[luger_205]

OK here is the update:

var allTabs = document.getElementsByTagName('table');
	for(i=1; i<allTabs.length; i++) {
	  var aTab = allTabs[i];
	  id_str = aTab.id.substring(6,aTab.id.length);

  var nadpis = $('nadpis_'+id_str);
  var tableid = 'table_'+id_str;
  alert('1');			// does fire
  addStaticEvent(nadpis, tableid);
  alert('2');			// does not fire
}

function addStaticEvent(o, id) {
	alert('id_str = '+tableid);     // does not fire
	o.addEvent("click",function(){
		$(tableid).slide('toggle');
}

[luger_205]

Sorry. o.addEvent wasn't closed. It is working. Thanks a lot!