javascript object undefined under anonymous function

Question

Let's first take a look at JavaScript code =>

function ConstructNodes(className,hiddenId,alertMsg,formName){
    this.className = className;
    this.hiddenId  = hiddenId;
    this.alertMsg  = alertMsg;
    this.formName  = formName;
}

ConstructNodes.prototype.getId = function(){
    var nodes = document.getElementsByClassName(this.className);
    for (var i=0;i<nodes.length;i++){
        nodes[i].onclick = function(){
            var r = confirm(this.alertMsg);
            if (r==true){
                alert(this.hiddenId); // undefined
            } else {
                return;
            }
        };
    }
};

var obj = new ConstructNodes("className","hiddenId","Are you sure ?","formName");
obj.getId();

My problem in this situation is that defined objects are undefined under getId's anonymous function , how can I solve this situation ? thanks

possible duplicate of this in event handlers for another object — Felix Kling
– Felix Kling, Commented Aug 22, 2012 at 22:05
@FelixKling how it is duplicate when I've nothing to do with implementing classes — nanobash
– nanobash, Commented Aug 22, 2012 at 22:09
@Tornike the problem is that your code expects this inside the event handlers set up by the "getId()" function to be the same as it is outside the handlers. It will not be. — Pointy
– Pointy, Commented Aug 22, 2012 at 22:10

Pointy · Accepted Answer · 2012-08-22 22:07:30Z

4

Your code is incorrectly assuming that this will refer to a "ConstructNodes" object inside the event handlers. It won't; it'll be the element. Instead, store this in an object, and things will be better:

ConstructNodes.prototype.getId = function(){
    var nodes = document.getElementsByClassName(this.className), obj = this;
    for (var i=0;i<nodes.length;i++){
        nodes[i].onclick = function(){
            var r = confirm(obj.alertMsg);
            if (r==true){
                alert(obj.hiddenId); // undefined
                document.getElementById(obj.hiddenId).value = this.id;
                alert(obj.hiddenId);
            } else {
                return;
            }
        };
    }
};

(It's not at all clear what you're trying to do, so there may be some issues still.)

answered Aug 22, 2012 at 22:07

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

Comments

guy mograbi · Accepted Answer · 2012-08-22 22:12:49Z

1

It took me a minute to understand your question.

You cannot refer to this in an anonymous function in getId. you must save this into a variable for example var me = this outside the anonymous function, and then use me.hiddenId.

Here is a JSFiddle to demonstrate that.

edited Aug 22, 2012 at 22:12

answered Aug 22, 2012 at 22:06

guy mograbi

28.9k17 gold badges91 silver badges128 bronze badges

2 Comments

Pointy Over a year ago

That is completely irrelevant.

guy mograbi Over a year ago

You are right - I misunderstood the question. I fixed the answer and the JSFiddle.

pimvdb · Accepted Answer · 2012-08-22 22:21:05Z

It's undefined because you can not access this in that function just like that. Any function is called with it's own execution context, thus the this in that case is something different than outside of the function.

You can solve that by defining a var in the outer scope and access it in the inner, like this:

function ConstructNodes(className,hiddenId,alertMsg,formName){
  this.className = className;
  this.hiddenId  = hiddenId;
  this.alertMsg  = alertMsg;
  this.formName  = formName;
}

ConstructNodes.prototype.getId = function() {
  var _this = this; // a reference that will be known in your closure/function
  var nodes = document.getElementsByClassName(this.className);
  for (var i = 0; i < nodes.length; i++) {
    nodes[i].onclick = function(){
      if (confirm(_this.alertMsg)) {
        alert(_this.hiddenId); // no longer undefined
      } else {
        return;
      }
    };
  }
};

var obj = new ConstructNodes("className", "hiddenId", "Are you sure?", "formName")
obj.getId();

Collectives™ on Stack Overflow

javascript object undefined under anonymous function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related