SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie Question - Local Var exhibiting old-style 'static' behaviour

    Hi, I've only just started hacking around with JS, and have created a basic pop-out effect on a menu, where I wanted to make the pop-out stick when the root list element is actually clicked. It all works fine (I know it's not an ideal solution but I do like to learn through my own experimentation), but I am puzzled by the behaviour of the variable 'bit' in the following code:

    Code:
    // called with window.onload
    function load_sub_menu(){
    	var bit=0;
    	var toggle=document.getElementById("li_2");
    	toggle.onmouseover=function(){document.getElementById("pop_out_list").style.display="block";}
    	toggle.onmouseout=function(){document.getElementById("pop_out_list").style.display="none";}
    	toggle.onclick=function(){
    		bit=toggle_sub_menu(document.getElementById("li_2"),bit);
    	}
    };
    
    function toggle_sub_menu(toggle,bit){
    		if(bit){
    			document.getElementById("pop_out_list").style.display="block";
    			toggle.onmouseout=function(){document.getElementById("pop_out_list").style.display="block";};
    			return 0;
    		}
    		else{
    			document.getElementById("pop_out_list").style.display="none";
    			toggle.onmouseout=function(){document.getElementById("pop_out_list").style.display="none";};
    			return 1;
    		}
    };
    The menu pops out and stays out, or pops back in and stays in, on a onclick to the root element - therefore 'bit' is remembering its value between function calls.

    At first I thought that a new global variable 'bit' must be being created in the onclick anonymous function call, else how can its value be maintained between function calls, but removing the local declaration just breaks the script.

    My searches for this have only returned standard global/local/private etc. explanations of variables in JS.

    I'm sure this is something pretty basic but I would really appreciate some enlightenment

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Beeblbrox View Post
    I'm sure this is something pretty basic
    Not exactly basic. When a function is declared inside another, the environment around the inner function is preserved. This is called a closure, meaning that bit persists and continues to be visible to the onclick handler, without having global scope.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ever so much for that! I did discover Closure variables in my search but the explanation was incredibly obfuscated that I wasn't sure that's what it was - thank you for clearing that up for me!

  4. #4
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    p.s. Is this a behaviour peculiar to JS? I have some experience in a number of languages but have never come across this before.

    Edit: wow - just read up on good ole wiki about this - whole new area of comp sci i was never aware of - looks like I have some studying! Thanks again!

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Functional programming is a pretty cool paradigm if your looking to expand your horizons.

  6. #6
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I did a little ML at Uni, was very impressed with the method, to be honest though my Maths is not up to it - very heavyweight. Still, I did learn the value and use of recursion out of it though, priceless.


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
  •