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 10 of 10
  1. #1
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts

    reference issue?

    Hi

    Experimenting.
    Trying to add a simple onclick event via onload, but I can't get it right?

    This works:

    Code:
    function checkStatus(box){
      if(box.checked != box.defaultChecked){
      alert("box status has changed");
      }
    }
    
    HTML
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="&cost=free" onclick="checkStatus(this)" />
    This does not:

    Code:
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="&cost=free" />
    
      window.onload = function (){
      var mybox = document.getElementById('mycheckbox');
      mybox.onclick = checkStatus; //how to get this to work??
    
    //none of the following work
     //mybox.onclick = checkStatus; //this calls the function but I don't have a box ref
     //mybox.onclick = checkStatus();
     //mybox.onclick = checkStatus(this);
     //mybox.onclick = checkStatus(mybox);
      }
    LT
    Last edited by low tech; 05-20-2012 at 10:46 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Code:
    mybox.onclick = function(){
       checkStatus(this);
    }
    You need to pass a reference to onclick so you can't pass your own parameters unless you encase it in another function like I did above. You can also do this:

    Code:
    function checkStatus(){
      var box=this;
      if(box.checked != box.defaultChecked){
      alert("box status has changed");
      }
    }
    
    mybox.onclick = checkStatus
    Or this...

    Code:
    mybox.onclick = function(){
      var box=this;
      if(box.checked != box.defaultChecked){
      alert("box status has changed");
      }
    }

  • Users who have thanked Wojjie for this post:

    low tech (05-20-2012)

  • #3
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi Wojjie

    I knew I had to pass in the reference but I just couldn't get it --- mushy brain syndrome hahaha

    Thanks for the code tips --- excellent

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,335
    Thanks
    13
    Thanked 348 Times in 344 Posts
    Quote Originally Posted by Wojjie View Post
    You need to pass a reference to onclick so you can't pass your own parameters unless you encase it in another function like I did above. You can also do this:

    Code:
    function checkStatus(){
      var box=this;
      if(box.checked != box.defaultChecked){
      alert("box status has changed");
      }
    }
    
    mybox.onclick = checkStatus
    or in other words, when you pass a handler function via the event property, the keyword this automatically refers to the element that executes the handler function and additionally it automatically passes the event object (W3C event model) as first and only function parameter.

    if you pass the function via the event attribute, it’s as if you would call the function from the global scope with the exception that the keywords this and event (verbatim in the attribute) refer to the element and event object.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    low tech (05-21-2012)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    This may perhaps be useful:-


    Code:
    CHECKBOX 1 <input type = "checkbox" id = "mybox1">
    CHECKBOX 2 <input type = "checkbox" id = "mybox2">
    CHECKBOX 3 <input type = "checkbox" id = "mybox3">
    
    <script type = "text/javascript">
    
    function checkStatus(){
    var box = this;
    alert ("Box " + box.id + " status has changed - now checked = " + box.checked);
    }
    
    mybox1.onclick = checkStatus
    mybox2.onclick = checkStatus
    mybox3.onclick = checkStatus
    
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Quote Originally Posted by Dormilich View Post
    if you pass the function via the event attribute, it’s as if you would call the function from the global scope with the exception that the keywords this and event (verbatim in the attribute) refer to the element and event object.
    ??? "event verbatim in the attribute"??? I thought event is only a magic keyword in MSIE. Can you show an example of what you mean by this?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,335
    Thanks
    13
    Thanked 348 Times in 344 Posts
    something like <a onclick="doSomething(event)">, though I never use inline events.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    Old Pedant (05-22-2012)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Fascinating. Never realized that event was magic in any browser other than MSIE.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Fascinating. Never realized that event was magic in any browser other than MSIE.
    You can actually use any variable name for the event to be passed in for browsers other than IE - but it only makes a difference inside the function. You can sometimes simplify the code if you use a variable name of event as then it can refer to the global even tobject in IE and to the value passed into the function in all other browsers.

    As a simple example consider:

    Code:
    getEventType = function(event) {
      return event.type;
    };

    Now if you have:

    Code:
    <div onclick="alert(getEventType())">
    clicking on it will display an alert identifying that the event is a "click" in ALL browsers since in IE it event references the global event object and in other browsers it references the specific event object that all browsers except IE pass in as a parameter to all functions directly triggered by an event.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    low tech (05-22-2012)

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Yeah, that's a variant on what I was talking about and what Dormilich was saying.

    I think this illustrates the point:
    Code:
    <html>
    <body>
    <input type="button" value="one" onclick="foo(event)"/>
    <input type="button" value="two" onclick="foo(zamboni)"/>
    <script type="text/javascript">
    function foo(w) { alert(w.type) }
    </script></body>
    </html>
    Button "one" works fine. Button "two" say "zamboni is not defined". In *ALL* browsers. Illustrating what Dormilich said: within the onclick handler, the keyword "event" is magic.

    Not the same as window.event being magic anywhere in MSIE. All of which was a surprise to me. I learned about using the first argument being the event more years ago than I know, but never knew about this (to me) weirdness.
    Last edited by Old Pedant; 05-22-2012 at 05:36 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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