Uncaught TypeError * is not a function

Question

I am trying to write and learn using Object.prototype and I am getting the error saying that this.issue is not a function when I call it within another method. What am I doing wrong that is causing it to through this Uncaught TypeError?

The Javascript:

$(document).ready(function() {
   var Example = function() {
       this.number1 = null;
       this.number2 = null;
   };

   Example.prototype.issue = function() {
       //Logic is here...
    };

   Example.prototype.updateNumber = function() {
       //more logic is here...
       this.issue();
   };

   Example.prototype.updateSign = function() {
       //logic here...
       this.issue();
   };

   (function() {
       var solution = new Example();

   })();

});

UPDATE: https://jsfiddle.net/czLtc82y/

Can you reproduce it in a JSFiddle? That'll make it easier to find the issue — Pikamander2, Jan 09 '16 at 05:41
as this is full of "pseudo code", and the real code part of what you've presented is valid, no chance of getting an answer — Jaromanda X, Jan 09 '16 at 05:41
Where did you call `issue()`? If you call `solution.issue()` or `solution.updateNumber()` or `solution.updateSign()` inside your IIFE, it is all right. — JasmineOT, Jan 09 '16 at 05:57
@JasmineOT I am calling this.issue() within .updateNumber & .updateSign. Also I just attached a JSFiddle — user3897842, Jan 09 '16 at 05:58
what does that have to do with the title that states `Uncaught TypeError * is not a function` - that error never happens — Jaromanda X, Jan 09 '16 at 06:05
See "Common problem: Using object methods as callbacks / event handlers" in the accepted answer of the duplicate question. — Felix Kling, Jan 09 '16 at 06:05
@JaromandaX if you look in the console that is where the error is appearing one you enter numbers into either of the fields — user3897842, Jan 09 '16 at 06:06
Thank you @FelixKling I took a look at that one briefly and it has a ton of great information! — user3897842, Jan 09 '16 at 06:07

guest271314 · Accepted Answer · 2016-01-09T06:22:37.803

At handlers attached to change event for #sign , .number

Example.prototype.newNumber = function(event) {
  if (event.currentTarget.id === 'number1') {
      this.number1 = parseFloat($(event.currentTarget).val()); 
  }
  else { 
     this.number2 = parseFloat($(event.currentTarget).val()); 
  }
  this.issue();
};

Example.prototype.newSign = function(event) {
    this.sign = $(event.currentTarget).val();
    this.issue();
};

this references #sign , .number elements , not new Example object created by

var problem = new Example();

Try using Function.prototype.bind() to set this to new Example() : problem within .change() handlers

(function() {

    var problem = new Example();

    $("#sign").change(problem.newSign.bind(problem));

    $(".number").change(problem.newNumber.bind(problem));

})();

jsfiddle https://jsfiddle.net/czLtc82y/1/

Alternatively, using $.proxy()

(function() {
    var problem = new Example();

    $("#sign").change($.proxy(problem.newSign, problem));

    $(".number").change($.proxy(problem.newNumber, problem));

})();

jsfiddle https://jsfiddle.net/czLtc82y/2/

Thank you @guest271314 for the answer and for explaining it! — user3897842, Jan 09 '16 at 06:17

Uncaught TypeError * is not a function

1 Answers1