SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript variables not applying values

    i have the following snippet of javascript:

    Code:
    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.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by scottybowl View Post
    i have the following snippet of javascript:

    Code:
    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.
    Code:
    liChilds[x].onclick = new Function("toggleSubMenu("+sub_menu_id+", false);
    return false");
    }
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi logic, thanks for the reply

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

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

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having similar problem

    Code:
    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!
    Last edited by jaredbcook; Mar 20, 2007 at 10:45. Reason: wrong line listed for error

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Never mind

    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:

    Code:
    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.
    Last edited by jaredbcook; Mar 20, 2007 at 11:00. Reason: added code

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Create closures like this:

    Code:
    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);
    	};
    }

  7. #7
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •