Javascript:Function in object is undefined when call by onclick

Question

I am trying on some code here,

var cat={
    col:"Red",
    getCol:function(){
        document.writeln(this.col);
    }
}

function getCol(){
    document.writeln(cat.col);
}

$(function(){ 
    $("#button1").click(cat.getCol);
    $("#button2").click(getCol);
})

But I got undefined for button1, "Red" for button2. Can someone tell me why?

And if I change it into $("#button1").click(cat.getCol());, I got the "Red" I need...

FYI, $("#button1").click(cat.getCol()); executes cat.getCol immediately, not on button click. — Felix Kling
– Felix Kling, Commented Dec 13, 2012 at 5:50

Ray Toal · Accepted Answer · 2012-12-13 05:57:50Z

First of all

$("#button1").click(cat.getCol);

gives you undefined because the body of cat.getCol uses this which ain't cat when this thing runs. I would suggest using Function.prototype.bind here, or several of the other variants if you are worried about cross-browser compatibility. There are many published solutions to the problems of setting "methods" as event handlers and ensuring that this stays bound to the enclosing object.

$("#button2").click(getCol);

works fine because getCol uses cat directly.

Finally

$("#button1").click(cat.getCol());

is terribly wrong. The expression cat.getCol() is a call which returns undefined. This is not a good value to set for a click handler. You just saw the document.write taking place, but not in response to a click.

ADDENDUM

Live demo using bind

avk · Accepted Answer · 2012-12-13 06:09:18Z

Generally in JS, this refers to the owner of the function .. So, in both cases when that function is called, this would resolve to the (jQuery object of the)element that has been clicked. In the first case, this is not 'cat', so col is not defined. Thus, it gives undefined. In the second case, no this, so cat.col resolves to Red.

I think you need to do some reading about JS functions, this, anonymous functions .. http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ is a good place to start.

This on MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

Collectives™ on Stack Overflow

Javascript:Function in object is undefined when call by onclick

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related