onClick

This code relates to some display = 'none' / display = 'block' CSS-toggled calendars I have. Since they're visible by default, in case Javascript is disabled, I'm adding the "show calendar/hide calendar" link dynamically, since it would be useless to someone without Javascript.

My trouble is this: I'm trying to loop through each calendar and add a unique toggler for each, but I can't figure out how to correctly pass unique parameters for each onclick event. What's happening is that when onclick is executed for any of the togglers outputted, it uses the variable reference I specify, when what I'm aiming at, rather, is to pass the variable's value at each iteration of the for loop instead. Is my English making sense?

Below is my code, with the problematic line emboldened. calz stands for calendars.

var calz = document.getElementsByTagName('table');
for (var i=0; i<calz.length; i++) {
if (calz[i].className != 'calendar') continue;
var anchor = document.createElement('a');
anchor.setAttribute('href', 'javascript:void(0)');
anchor.id = calz[i].id + 'Toggle';
anchor.onclick = function(){toggle(calz[i])};
var img = document.createElement('img');
img.setAttribute('src', 'calendar.jpg');
anchor.appendChild(img);
anchor.appendChild(document.createTextNode(' [show calendar]'));
calz[i].parentNode.insertBefore(anchor, calz[i]);
}

Thanks for any help! I'm a newb with Javascript.

Doctor Colossus

BTW, to give a more clear idea of what I'm trying to do -- the goal of this code is to generate the equivalent of the following XHTML before each calendar, with the appropriate ID relative to the calendar itself's ID (i.e. anchor.id = calz[i].id + 'Toggle';), and the appropriate parameter for my toggle() function -- that being the calendar's ID:

<a href="javascript:void(0)" onclick="function(){toggle(calz[i])">
<img src="calendar.jpg" /> [show calendar]
</a>

What happens is that toggle() executes for each toggler using the last loop iteration's value -- in my current case it turns out to be calz[2] for all three. Instead, the first one should execute calz[0], or it's value, the second one calz[1], or its value, etc. How can I turn the variable calz[i] into a static parameter for each iteration of the loop?

And o damn... I signed up here only a moment ago, and just noticed that I made a typo in my handle! I was very tired... If any admins happen by here, I'd appreciate if you could fix it. Humbly, DC

Well, I solved the problem. I was hoping someone else might think of something while I was taking a break. :D But it seems I've completed this saga solo... unless and until someone points out superior ways of doing things.

For anyone curious, I simply replaced:
anchor.onclick = function(){toggle(calz[i])};

with:
anchor.onclick = toggle;

Then modified the toggle function, which previously took an element object as a parameter, like so:
function toggle() {
var e = document.getElementById(this.id.replace('Toggle',''));
if(e.style.display == 'block') {
e.style.display = 'none';
document.getElementById(e.id + 'Toggle').lastChild.nodeValue = " [show calendar]";
return false;
}
else {
e.style.display = 'block';
document.getElementById(e.id + 'Toggle').lastChild.nodeValue = " [hide calendar]";
return false;
}
}

The original code I posted, which runs when the DOM's finished loading, generates anchors with IDs based on the calendars they're intended to affect (i.e. 'startCal' & 'startCalToggle'). I was perusing Javascript: The Definitive Guide, by David Flanagan, and discovered the this keyword, which points to the element calling the function. Using its magick, I simply got the ID of the calling anchor, re-subtracted the word 'Toggle', which was earlier appended to the ID to differentiate it from the calendar's, and GotElementById from within the toggle function.

Aloha to all.