CODEWITHSUNDEEP
javascriptobjectprototypeundefined
jamadri
jamadri

Reputation: 956

Javascript object constructor setting as undefined

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);

Upvotes: 0

Views: 961

Answers (1)

Mike Cluck
Mike Cluck

Reputation: 32511

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()

Upvotes: 6

Related Questions