Calling a nested function inside a class JavaScript

Question

I have a class called "Game" and inside it, there's a property called "inventory" which invokes the "Inventory(id)" function where all the inventory functions are created and housed to clear clutter.

I've created a new object

var Game = new Game(body, mainElement, inventoryItems, statusElement);

(it should be self explanitory, the body is selecting the body tag, main element is my main area, status is a status element, and of course inventoryItems is the <ul> I'm using to append my items into.) - you can check the codepen for a better understanding.

The main code you need to help me

function Game(body, mainElement, inventoryItems, statusElement) {
 this.body = body;
 this.main = mainElement;
 this.inventory = Inventory(inventoryItems);
 this.status = statusElement;
}
function Inventory(y) {
 this.element = y;
 this.create = function(itemName, equippable, sellable) {
 this.element.append(function(){
 var item = '';
 if (itemName.length > 0) {
 item += "<li>" + itemName;
 if (sellable) {
 item += "<label>Sell<input type='checkbox' name='sell' onclick='javacript: confirmSell(this);' /></label>";
 }
 if (equippable) {
 item += "<label>Equip<input type='checkbox' name='equip' onclick='javacript: equip(this);' /></label>";
 }
 } 
 return item;
 }, this.element);
 }
}
var Game = new Game(body, mainElement, inventoryItems, statusElement);
Game.inventory(create("Bronze Knife", true, true));
Game.inventory(create("Ramen Noodles", false, true));
Game.inventory(create("Boots w/da Fur", true, true));

Now, I get funny errors when I try calling the inventory(create(string, bool, bool));

It creates the first item, so at least I know "something" is going "somewhat" correctly, or I could be entirely wrong and deserve to just shut my computer down.

In chrome I'm told the Bronze Knife inventory.create is telling me undefined is not a function.

Any help is GREATLY appreciated

EDIT: link

• Bergi: You'll need to use new Inventory(...).
• Bergi: Notice that you should not overwrite the Game constructor with your instance. Use var game = new Game(...)

Answer 1

Game.inventory is object (reference to Inventory object (add new before Inventory)) which contain method create, so you can call this method like this

 .....
 this.inventory = new Inventory(inventoryItems);
 .....
 var Game = new Game(body, mainElement, inventoryItems, statusElement);
 Game.inventory.create("Bronze Knife", true, true);
 Game.inventory.create("Ramen Noodles", false, true);
 Game.inventory.create("Boots w/da Fur", true, true);

Demo: http://codepen.io/tarasyuk/pen/yyJGJK

Answer 2

Game is a function, and you're defining a variable named Game.

Try to rename var Game = new Game(...); to var game = new Game(...);

Answer 3

Use new when creating an inventory. Use dot notation to access inventory's methods, as they are properties of the inventory object.

// Relevant changes shown:
function Game(body, mainElement, inventoryItems, statusElement) {
 this.inventory = new Inventory(inventoryItems);
}
Game.inventory.create("Bronze Knife", true, true);

In the future, you may want to try running your code through a linter like JSLint. Just turn off the "messy white space" option or add /*jslint white: true */ to the top of your file, and it should give you useful feedback on how to solve this on your own.

I ran your code through JSLint and the first thing I noticed was "'Inventory' was used before it was defined." So I moved Inventory above Game. I ran JSLint again and it reported "Missing 'new'." Finally, I looked down through the report and found "'create' was used before it was defined.". Those two points of data could have hinted you in the right direction.