Scope Error in Javascript. Calling a method within a different method of that object

Question

I've got a variable timekeep.

var timeKeep;

and I define it thusly:

timeKeep = Class.create({
  initialize: function() {
    this.initObservers();
  },

  initObservers: function() {
    $$('input').each( function(el) {
      el.observe('keypress', function(ev) {
        // the key code for 'enter/return' is 13
        if(ev.keyCode === 13){
          timeKeep.submit();
              // Uncaught TypeError: Object function klass() {
              // this.initialize.apply(this, arguments);
              // } has no method 'submit'
        }
      });
    });
  },

  submit: function() {
    alert('Submitted!');
  }
})

The error I am getting is commented out below the line that it occurs. It's got something to do with calling a timeKeep method within a different scope I think?

Is there a problem calling timeKeep.method() inside a foreach statement?

You are right, my mistake. I rewrote the code for this post, must've missed it. Fixed it. Thank you. — Joshua Soileau
– Joshua Soileau, Commented Jun 12, 2013 at 14:09

epascarello · Accepted Answer · 2013-06-12 14:12:25Z

1

Problem is with you OOP style. Use a closure so you call the current instance of your class.

  initObservers: function () {
      var that = this;
      $$('input')
          .each(function (el) {
              el.observe('keypress', function (ev) {
                  // the key code for 'enter/return' is 13
                  if (ev.keyCode === 13) {
                      that.submit();
                  }
              });
          });
  },

You could also look at bind

  initObservers: function() {
      var submit = this.submit.bind(this);
      $$('input')
          .each(function (el) {
              el.observe('keypress', function (ev) {
                  // the key code for 'enter/return' is 13
                  if (ev.keyCode === 13) {
                      submit();
                  }
              });
          });
  },

edited Jun 12, 2013 at 14:12

answered Jun 12, 2013 at 13:40

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

2 Comments

Joshua Soileau Over a year ago

Thank you, this fixed my problem. I used the binding solution. I am getting similar errors in other parts of my code too, though. In a different function, I called a method this.isValidRow(), but get an error: "Uncaught TypeError: Object [object Object] has no method 'isValidRow'". I call this.isValidRow() in the first line of that method, so I don't know why it wouldnt recognize it. Does this sound like a related problem?

epascarello Over a year ago

Probably, if it this is in a different scope.

gztomas · Accepted Answer · 2013-06-12 14:05:11Z

1

You are assuming that Class.create returns an instance of an object of the type you are defining, but no, it returns a constructor function for creating instances of the class you are defining.

You can add the new keyword to the assignment and then you will have in timeKeep what you want to:

timeKeep = new Class.create({
...
})()

answered Jun 12, 2013 at 14:05

gztomas

3,2903 gold badges30 silver badges39 bronze badges

Comments

Geek Num 88 · Accepted Answer · 2013-06-12 14:39:39Z

As suggested - using Function#bind() will solve your problem but there is a cleaner way so that you can continue to use this inside the class scope.

Also look into the invoke() method as this is a perfect opportunity to use it. $$() returns a list of elements and if you want to perform the same function on all of the elements invoke() will handle iterating over the list.

timeKeep = Class.create({
  initialize: function() {
    this.initObservers();
  },

  initObservers: function() {
    $$('input').invoke('observe','keypress',function(ev) {
      // the key code for 'enter/return' is 13
      if(ev.keyCode === 13){
        timeKeep.submit();
        // Uncaught TypeError: Object function klass() {
        // this.initialize.apply(this, arguments);
        // } has no method 'submit'
      }
//Add the bind method to the closure to bind 'this' inside that function scope
//to 'this' of the class
//the binding will allow you to call this.submit() instead of timeKeep.submit
//as well as access any of the class properties and methods inside this closure
    }.bind(this));
  } ,

  submit: function() {
    alert('Submitted!');
  }
});

PrototypeJS documentation on observers http://api.prototypejs.org/dom/Event/observe/ - look at the heading Using an Instance Method as a Handler

Collectives™ on Stack Overflow

Scope Error in Javascript. Calling a method within a different method of that object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related