Javascript variables not applying values

[scottybowl]

i have the following snippet of javascript:

liChilds[x].onclick = function(){
toggleSubMenu(sub_menu_id, false);
return false;
}

That code happens within a loop, and sub_menu_id has a different value through each iteration of the loop. For example, if it loops 4 times, then there will be 4 onclick functions and sub_menu_id would change for each one. This should happen in theory, but instead, whichever item you click on, sub_menu_id takes the value of its last value in the loop. (4 in this example)

My question is, how do I make the function toggleSubMenu take the value of sub_menu_id at the time the on click function is created (i.e while looping) rather than taking the value of sub_menu_id when it is actually clicked.

[Logic Ali]

i have the following snippet of javascript:

liChilds[x].onclick = function(){
toggleSubMenu(sub_menu_id, false);
return false;
}

That code happens within a loop, and sub_menu_id has a different value through each iteration of the loop. For example, if it loops 4 times, then there will be 4 onclick functions and sub_menu_id would change for each one. This should happen in theory, but instead, whichever item you click on, sub_menu_id takes the value of its last value in the loop. (4 in this example)

My question is, how do I make the function toggleSubMenu take the value of sub_menu_id at the time the on click function is created (i.e while looping) rather than taking the value of sub_menu_id when it is actually clicked.

liChilds[x].onclick = new Function("toggleSubMenu("+sub_menu_id+", false);
return false");
}

[scottybowl]

hi logic, thanks for the reply

I posted this topic on another forum and found that the following will work:

liChilds[x].sub_menu_id = sub_menu_id;

liChilds[x].onclick = function() { toggleSubMenu(this.sub_menu_id, false); return false; }

[jaredbcook]

function loadOrbMenu() {
	menu = document.getElementById("orb_menu");
	menuTitles = menu.getElementsByTagName("h6");
	subMenus = menu.getElementsByTagName("ul");

	for (var i = 0; i < menuTitles.length; i++) {
		menuTitles[i].onclick = function() {
			toggleOrbMenu(menuTitles[i].id, subMenus[i].id);
		};
	}
}

function toggleOrbMenu(titleID, menuID) {
	title = document.getElementById(titleID);
	menu = document.getElementById(menuID);
	
	if (title.className == "collapsed")
		title.className = null;
	else
		title.className = "collapsed";
		
	if (menu.className == "collapsed")
		menu.className = null;
	else
		menu.className = "collapsed";
}

The error I get is "menuTitle[i]" has no properties (line 8). Please help. Thanks!

[jaredbcook]

Never mind. I wrapped each menu title and its associated sub-menu in a div and just changed the class of the div to collapsed when the title is clicked:

function loadOrbMenu() {
	menus = document.getElementById("orb_menu").getElementsByTagName("div");

	for (var i = 0; i < menus.length; i++) {
		menus[i].onclick = function() {
			toggleOrbMenu(this);
		};
	}
}

function toggleOrbMenu(menu) {
	if (menu.className == "collapsed")
		menu.className = null;
	else
		menu.className = "collapsed";
}

I'm still curious to know if there's another solution, though.

[jimfraser]

Create closures like this:

for (var i = 0; i < menuTitles.length; i++) {
	setOnclick(menuTitles[i],menuTitles[i].id,subMenus[i].id);
}

...

function setOnclick(item,id,subId) {
	item.onclick = function () {
		toggleOrbMenu(id,subId);
	};
}

[jaredbcook]

Ah, that's great! I can use this for all sorts of stuff! Thanks!