Javascript object constructor setting as undefined

Question

I've created a new object, and in that object I have several object variables, but the events (optional) object isn't being set correctly. It's coming up as undefined when called in the build function by the event tab, and my guess it's something to do with it possibly being asynchronous. Below is my object and call, and also what I'm getting when referencing the object.

I can't figure out why exactly it's coming in as undefined as it's being set before the build function is even called.

UPDATE: This fiddle has the exact code as being called. https://jsfiddle.net/trickell/Leg1gqkz/2/

The problem is in the checkEvents() method.

var Wizard = function(id, events) {
  this.activeTab  = '';
  this.prevTab    = '';
  this.nextTab    = '';
  this.events     = (events) ? events : {}; // Optional events object. User may define events based on tab. (ex. "tabName" : function(){})

  console.log(this.events);  // Returns object with no keys

  this.build(id);
  return this;
}

Wizard.prototype.build = function(id){
  var tab = id,
      events = this.events;

  // **** This is what's showing up as undefined!!! *****/
  console.log(events.cardInfo);  
}

(function($, undefined){

  var wiz  = new Wizard($('#package_wizard'),
    {
        cardInfo : function() {
            alert('hello world');
        }
    });

 })(jQuery);

Mike Cluck · Accepted Answer · 2016-11-14 18:28:15Z

6

The problem is that you're missing a semicolon after your definition for build. Without a semicolon, you're essentially doing this:

Wizard.prototype.build = function() {
  // do stuff
}(function($, undefined) { ... })();

Meaning, you're trying to call the function immediately and pass it a function as an argument. Here's your code with semicolons in the right places.

var Wizard = function(id, events) {
  console.log(events);
  this.activeTab = '';
  this.prevTab = '';
  this.nextTab = '';
  this.events = (events) ? events : {}; // Optional events object. User may define events based on tab. (ex. "tabName" : function(){})

  console.log(this.events); // Returns object with no keys

  this.build(id);
  return this;
}; // <-- Here's a semicolon

Wizard.prototype.build = function(id) {
  var tab = id,
    events = this.events;

  // **** This is what's showing up as undefined!!! *****/
  console.log(events.cardInfo);
}; // <-- and the original problem

(function($, undefined) {

  var wiz = new Wizard($('#package_wizard'), {
    cardInfo: function() {
      alert('hello world');
    }
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

--

As for your update, the problem is you have a typo. You wrote

event.cardInfo()

when you should have written

events.cardInfo()

edited Nov 14, 2016 at 18:28

answered Nov 14, 2016 at 18:17

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

10 Comments

jamadri Over a year ago

I'm not exactly defining it like that. I'm using the $.extend(Wizard.prototype, { build: function(){} }); method from jquery.

Mike Cluck Over a year ago

@jamadri Then show your exact code. As you can see, that was the problem in this case. If you're doing something else and this doesn't solve it, I need to see that code.

jamadri Over a year ago

I'm going to modify this with a fiddle URL with the entire widget I've created. Maybe it will shed some light on exactly what's happening xD

Madara's Ghost Over a year ago

@jamadri When reducing the example, make sure the outcome doesn't change, and that the same problem can be observed. Right now, you've received an answer to the question as it was asked, please don't make edits to the question that would invalidate the answers you were given. Instead, ask a new question.

Mike Cluck Over a year ago

@jamadri Did you check my update? The answer is at the bottom.

|

Collectives™ on Stack Overflow

Javascript object constructor setting as undefined

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related