Question

I have a code like this:

var Obj = {
  el : document.getElementById("elementId"),

  doSomething : function(){ this.el.property = "value" }
};

Obj.el.addEventListener('click', Obj.doSomething);

but the element this.el is undefined when the click event is fired ?
What causes this to happen?

NOTE: I don’t know how to break the lines in the code in this editor, that’s why it’s in a single line.

Answer 1

In JavaScript (unlike most other languages with similar syntax), this is defined entirely by how a function is called, not where it’s defined. The way event handlers are called, this within your function doesn’t refer to your object.

You can correct it in three ways:

1. If you’re targeting ES5-enabled browsers or including an ES5 “shim”, use Function#bind:

   var Obj = {
     el : document.getElementById,
   
     doSomething : function(){ this.el.property = "value" }
   };
   
   Obj.el.addEventListener('click', Obj.doSomething.bind(Obj));
   

2. Otherwise, use a closure:

   var Obj = {
     el : document.getElementById,
   
     doSomething : function(){ this.el.property = "value" }
   };
   
   Obj.el.addEventListener('click', function(event) {
       return Obj.doSomething(event);
   });
   

3. As RobG pointed out in the comments, because you have only one Obj object (rather than having a constructor function or something that will create more than one as necessary), you could just refer to that object using its variable (Obj) rather than this:

   var Obj = {
     el : document.getElementById,
   
     // Obj instead of this ---v
     doSomething : function(){ Obj.el.property = "value" }
   };
   
   Obj.el.addEventListener('click', Obj.doSomething);
   

   That only works when the object is a one-off within the scope in which it’s defined (which is true for your Obj example). If the only reference you have to it were this (e.g., you didn’t have Obj), you couldn’t do this and would want one of the prior two options.

More:

• Mythical methods
• You must remember this

---

Note that your el property is suspect, though. You’ve defined it as

el : document.getElementById,

…which means that el now points to the function getElementById. That’s probably not what you meant to do. Presumably you meant el to refer to a DOM element that you retrieved via getElementById, e.g.:

el : document.getElementById("someIdValue"),

More here.