Object has not method error in JavaScript

Question

I am using following code but it returns following error:

Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'userInput'

Here is the code jsfiddle:

var ClickEvent = function (event) {
    this.ev = $('.' + event);
    this.ev.on('click', function () { this.userInput(); });
};

ClickEvent.prototype = function () {
    return {
        userInput: function () {
            console.log('user');
        },
        
        show: function () {
            console.log('show');
        }
    };   
}();

var c = new ClickEvent('event');

I am calling userInput function inside on() callback function but it returns above error.

How can I solve this problem?

put a console.log(this) inside the click event handler function (where you now have userInput). What does it tell you ? :) — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jul 15, 2013 at 12:42

Arun P Johny · Accepted Answer · 2013-07-15 12:52:33Z

5

The problem is the execution context(this) inside the click callback handler does not point to the ClickEvent instance, it is referencing the dom element that was clicked.

You need to use

this.ev.on('click', $.proxy(function () { this.userInput(); }, this));

Demo: Fiddle

or

var that = this;
this.ev.on('click', function () { that.userInput(); });

Demo: Fiddle

edited Jul 15, 2013 at 12:52

answered Jul 15, 2013 at 12:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

sp00m · Accepted Answer · 2013-07-15 12:42:23Z

2

this.userInput() is nested within the callback function, and thus is scoped within it. You could externalize the this instance you need as follow:

var ClickEvent = function (event) {
    var $this = this;
    $this.ev = $('.' + event);
    $this.ev.on('click', function () { $this.userInput(); });
};

answered Jul 15, 2013 at 12:42

sp00m

49k31 gold badges152 silver badges262 bronze badges

2 Comments

Om3ga Over a year ago

What is the meaning of $this? I mean is this var that = this; different than var $that = this; ?

sp00m Over a year ago

@x4ph4r No, there's no difference, $this is just the name of a variable, just like that.

Arun Chandran Chackachattil · Accepted Answer · 2013-07-15 12:54:26Z

0

the "this" inside your onclick function is referencing "this.ev" which is

"$('.' + event);"

not your object with "userInput" and "show".

edited Jul 15, 2013 at 12:54

Arun Chandran Chackachattil

3,3627 gold badges33 silver badges45 bronze badges

answered Jul 15, 2013 at 12:45

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

Collectives™ on Stack Overflow

Object has not method error in JavaScript

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related