'this' is undefined inside an Object in javascript accessing property of object by another property

Question

Type= {
        Container: $get('ctl00_Main_rbtnlst_Type'),
        Local: this.Container.getElementsByTagName('input'),
        Foreign:this.Container.getElementsByTagName('input')
    }

when i ran through this code inside firebug console i get error 'this.Container' is undefined even though it is defined. How else can i access the Container property inside the Local and Foreign property. I even tried this.

Type= {
        Container: $get('ctl00_Main_rbtnlst_Type'),
        Local: Container.getElementsByTagName('input'),
        Foreign:Container.getElementsByTagName('input')
    }

KooiInc · Accepted Answer · 2011-05-19 12:00:54Z

3

You can't get this while instantiating. You can do:

Type= {
        Container: $get('ctl00_Main_rbtnlst_Type'),
        Local: function(){return this.Container.getElementsByTagName('input');},
        Foreign: function(){return this.Container.getElementsByTagName('input');}
    }

And later on get Local or Foreign using Type.Local()/Type.Foreign()

or use this reduntant pattern if you need Local/Foreign within the instance:

Type= {
            Container: $get('ctl00_Main_rbtnlst_Type'),
            Local: $get('ctl00_Main_rbtnlst_Type')
                     .getElementsByTagName('input');},
            Foreign: $get('ctl00_Main_rbtnlst_Type')
                      .getElementsByTagName('input');}
        }

Or use this immediately executed function:

var Type = (function(){
   var container = $get('ctl00_Main_rbtnlst_Type'),
       local = container.getElementsByTagName('input'),
       foreign = container.getElementsByTagName('input');
   return {
           Container: container,
           Local: local,
           Foreign: foreign
          }
})();

and to be complete, you can also use a few getters, but that won't work in all browsers (especially not in IE<9)

var Type = {
    Container: $get('ctl00_Main_rbtnlst_Type'),
    get Local() {return this.Container.getElementsByTagName('input');},
    get Foreign() {return this.Container.getElementsByTagName('input');}
}

note: Local and Foreign are the same, is that what you intended?

edited May 19, 2011 at 12:00

answered May 19, 2011 at 10:37

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deeptechtons Over a year ago

@Kooilnc Anonymous function is the only way?? how could i do with a property

Deeptechtons Over a year ago

@Kooilnc now why didn't i think of closures thanks for the reminder marked as answer btw ctl00_Main_rbtnlst_Type is a table and there is 2 radio buttons inside them hence Local and Foreign would refer to two different controls. thanks

Zecc · Accepted Answer · 2011-05-19 10:40:36Z

2

You can do this:

var container = $get('ctl00_Main_rbtnlst_Type');
Type = {
    Container: container,
    Local: container.getElementsByTagName('input'),
    Foreign: container.getElementsByTagName('input')
}

But what you probably want is this:

function Type(containerId){
    var container = $get(containerId);
    return {
        Container: container,
        Local: container.getElementsByTagName('input'),
        Foreign: container.getElementsByTagName('input')
    }
}

var obj = Type('ctl00_Main_rbtnlst_Type');
// can now use obj.Container, obj.Local and obj.Foreign

answered May 19, 2011 at 10:40

Zecc

4,35023 silver badges17 bronze badges

Collectives™ on Stack Overflow

'this' is undefined inside an Object in javascript accessing property of object by another property

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related