Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Events

    Hello Forum:

    I hate asking questions of the forum becuase I like to try figuring things out on my own; however, my incomplete understanding
    of JavaScript event processing just about has me staring down the business end of a Walter PPK. Can (and will) someone please
    help me understand how to accomplish this task...the code snippet included is hypothetical, but, nonetheless, mimics what I am
    attempting to do.

    Code:
    function myTest(){
      this.ndxarray = new Array();
      this.sortel = document.getElementById("sortControl");
      this.sortndx = 1;
     
      this.sortel.onclick = function(){
        //   I need to sort the ndxarray here based on sortndx //
      }
    }
    Out on some HTML page I have instansiated the MyTest function and assigned values to the array. I have a control with the
    id of "sortControl" that will be used to fire out the array sort. I'm stuck. How do I access this.ndxarray inside the onclick function?
    Thanks!

    --Shawn

  • #2
    New Coder
    Join Date
    Aug 2005
    Location
    Edmonton, Canada
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It depends on what object the keyword "this" is. If "this" refers to the document, then inside your onlick function you can simply refer to sortndx by just the variable name.

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Math Continuum</TITLE>
    <
    script language="javascript">
    function 
    myTest(){
        
    this.ndxarray = new Array();
        
    this.sortel document.getElementById("sortControl");
        
    this.sortndx 1;
        
        
    this.sortel.onclick = function(){
            
    alert(sortndx);
        }
    }
    </script>
    </HEAD>
    <BODY onLoad="myTest()">
        <div id="sortControl">ahflaskdjfaslkdfj</div>
    </BODY>
    </HTML> 

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But here "this" does not refer to the document, it refers to the object "myTest"

    Each function creates a new scope, so "this" in the inner function isn't "myTest", it's "myTest.sortel" (because the function is bound to this.sortel).

    But JavaScript implements scope iteration - if a variable doesn't exist in a particular scope, the interpretor will climb the scope chain looking for it.

    You can exploit this fact to create a reference which is available to inner scopes:
    Code:
    function myTest(){
      this.ndxarray = new Array();
      this.sortel = document.getElementById("sortControl");
      this.sortndx = 1;
     
      var self = this;
      this.sortel.onclick = function(){
        //"self" is a reference to the parent "this"
      }
    }
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    New Coder
    Join Date
    Aug 2005
    Location
    Edmonton, Canada
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any variables inside the Object calling myTest() will not exist in this.sortel. It is a different scope. You're close with the var self = this, but what you want to do is this.sortel.parent = this. This way when the this.sortel onClick() function is called, the sortControl element knows where to look for it's parent. To the sortControl, in my example, it's parent has nothing to do with JavaScript, it's parent is the document Object. But by assigning a variable to it called parent, I can tell it where to look for it's JavaScript parent. In this example I also created an object that calls the myTest() function, you didn't provide much code, so I'm not really sure what you're fully trying to do. With more information I can provide more code insight if this doesn't help with your scoping issues.
    PHP Code:
    <html>
    <
    head>
    <
    title>Math Continuum</title>
    <
    script language="javascript">
    function 
    initPage() {
        var 
    myObj = new Object();
        
    myObj.newScope myTest;
        
    myObj.newScope();
    }

    function 
    myTest(){
        
    this.ndxarray = new Array();
        
    this.sortel document.getElementById("sortControl");
        
    this.sortndx 1;
        
    this.sortel.parent this;
        
        
    this.sortel.onclick = function(){
            var 
    "id = " this.id;
            
    += "\nsortndx = " this.parent.sortndx;
            
    alert(s);
        }
    }
    </script>
    </head>


    <body onLoad="initPage()">
        <div id="sortControl">ahflaskdjfaslkdfj</div>
    </body>
    </html> 

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Both the self technique and the parent technique are almost EXACTLY the same thing. They store a reference to the defining context of the object, which is what is needed for member methods to be able to access member variables.

    The difference between the two solutions is that in the solution with self, the reference to the defininf context of the object is stored in the object itself, and therefore contained in all function and object definitions from within that context, and the solution with this.parent stores the reference to the frame on the element that is receiving the function.

    I prefer the self technique and creating closures from within the object, instead of putting a reference to the "object" on the child controls because it makes more sense to me, but also because it keeps the closure private instead of public, which prevents headaches later on if a script mucks with the control. Since self is private, no one can touch it and break your expectations. Much saner in my opinion.

  • #6
    New Coder
    Join Date
    Aug 2005
    Location
    Edmonton, Canada
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm, interesting... Beagle is right about the self technique. I didn't think the variable would be accessible inside the sortControl element but after testing it out, it is. Beagle sounds like he knows what he's talking about in this case about the scoping so I would probably go with his I guess.
    Modified below with self:
    PHP Code:
    <html>
    <
    head>
    <
    title>Math Continuum</title>
    <
    script language="javascript">
    function 
    initPage() {
        var 
    myObj = new Object();
        
    myObj.newScope myTest;
        
    myObj.newScope();
    }

    function 
    myTest(){
        
    this.ndxarray = new Array();
        
    this.sortel document.getElementById("sortControl");
        
    this.sortndx 1;
        
    this.sortel.parent this;
        var 
    self this;
        
        
    this.sortel.onclick = function(){
            var 
    "id = " this.id;
            
    += "\nparent sortndx = " this.parent.sortndx;
            
    += "\nself sortndx = " self.sortndx;
            
    alert(s);
        }
    }
    </script>
    </head>


    <body onLoad="initPage()">
        <div id="sortControl">ahflaskdjfaslkdfj</div>
    </body>
    </html> 


  •  

    Posting Permissions

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