SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Awesome Addict
    Join Date
    Mar 2004
    Location
    Toronto, Canada
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding Events w/ Prototype

    Alright some code for you to consider:
    Code:
    // assume that addEvent is defined somewhere
    
    var Login = Class.create();
    Login.prototype = {
      divLogin : null,
      radioBtn : null,
    
      initialize : function() {
        this.divLogin = $("loginDIV");
        this.radioBtn = $("radioButton");
        this.addRadioClickHandlers();
      },
    
      addRadioClickHandlers : function() {
          addEvent(this.radioBtn, "click", function() {
            new Effect.Appear(this.divLogin);
          });
      }
    
    };
    
    addEvent(window, "load", function {
      var login = new Login();
    });
    How it should work:
    - on page load instantiate a new Login object called login
    - login initializes and adds event handler to a radio button onClick

    Here's the problem: when the radio button is clicked I'm given the error "element has no properties"... which is not unexpected. Here's why: within the addRadioClickHandlers method I refer to "this.divLogin" -- in other words login.divLogin which is $("loginDIV"). The problem is that "this.loginDiv" within the addEvent method has no reference - "this" is referring to Login.radioBtn. So, my question is, within the onclick handler for the radio button, how do I refer to Login.loginDiv? I can modify the code to look like this and it will work:
    Code:
      addRadioClickHandlers : function() {
          addEvent(this.radioBtn, "click", function() {
            new Effect.Appear($("loginDIV"));
          });
      }
    ... but I'd much rather refer to Login.loginDIV. Ideas? Thanks!

  2. #2
    Awesome Addict
    Join Date
    Mar 2004
    Location
    Toronto, Canada
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    I've managed to solve this and I'm posting code that works just in case others run into the same issue:

    Code:
    var Login = Class.create();
    Login.prototype = {
      divLogin : null,
      radioBtn : null,
    
      initialize : function() {
        this.divLogin = $("loginDIV");
        this.radioBtn = $("radioButton");
        this.addRadioClickHandlers();
      },
    
      addRadioClickHandlers : function() {
          addEvent(this.radioBtn, "click", function() {
            new Effect.Appear(Login.divLogin);
          });
      }
    
    };
    
    addEvent(window, "load", function() {
      var login2 = new Login();
    });
    There you have it: the only change is in the Login.addRadioClickHandlers method. Since we're adding the event to Login.radioBtn, Login must be referenced in the call "new Effect.Appear". Otherwise, if you use the "this" keyword, you'll be referencing the radio button itself -- so this.divLogin fails since divLogin has nothing to do with the radio button object.


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
  •