Cannot Read Property ‘update’ of undefined

The Chest Objects i’ve created have an update function, but apparently they dont exist or are not declared?

I feel like ive been pretty thourough checking my work, but it’s pretty complicated and possibly above me and have no idea whats wrong, my code is commented so as to make your job easier since I do not have much help to give

/*
 * Important Variables
 */
//Colors for inventory slots
var inventoryColor1 = (150, 150, 150);
var inventoryColor2 = (60, 60, 60);

//Function Prototypes
var Player;
var InventoryManager;

// Neutral
var InventorySlot;

var Chest;
var ChestCreator;

var Chest = function(x, y, w, h, r)
{
  this.Slots = [];
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.r = r;
  this.color1 = (201, 111, 0);
  this.color2 = (255, 234, 0);
  this.color3 = (15, 11, 15); 
  this.inventoryActive = true;

  //Create 4 slots on startup
  for (var i = 0; i < 4; i++)
  {
   this.Slots.push(InventorySlot(this.x, this.y));   
  }

 //Create new slots 
  this.newSlot = function()
  {
      this.Slots.push(new InventorySlot(this.x, this.y));
  };

  this.drawSlots = function()
  {
       if (this.inventoryActive)
       {  
          // if the slots are active, draw them
          // Set the 'curser' up and to the left to start drawing slots
          // (currentSlot.x = currentObject.x-slotW*currentObject.slots.length/4)
          this.cx = this.x-28*this.Slots.length/4;
          this.cy = this.y-28*this.Slots.length/4;

          for (var i = 0; i < this.Slots.length; i++)
          {
                fill(inventoryColor2);
                strokeWeight(3);
                stroke(inventoryColor1);
                rect(this.cx-3,this.cy-3,25+3,25+3);
                fill(inventoryColor1);
                noStroke();
                rect(this.cx, this.cy, 25, 25, 5);

                // Create rows of 4
                this.cx+=28;
                if (i%4 === 0)
                {
                    this.cy+=28;  
                    this.cx = this.x-28*this.Slots.length/4;
                }
           }
       }
  };

// 
//
//Pretty sure this is there the problem is
//
//
  this.update = function()
  {
      stroke(this.color1);
      fill(this.color2);
      rect(this.x, this.y, this.w, this.h, this.r);
      noStroke();
      fill(this.color3);
      rect(this.x,this.y+height/2,this.w,this.h/5);
  };  
};

// A creater of the chest objects, 

var ChestCreator = function()
{
 // Chests in the enviornment
 this.Chests = [];

/*    
Removing this from the code (entirely) makes the program run smoothly, but im sure its essential
*/
 // Create 4 chests on Startup
  for (var i = 0; i < 4; i++)
  {
      this.Chests.push(Chest(random(25,375), random(25,375), random(20,25), random(15,20), random(0,5)));
  }

  this.newChest = function()
  {
     // generate a chest with random x,y,width,height,radius
     this.Chests.push(Chest(random(25,375), random(25,375), random(20,25), random(15,20), random(0,5)));
  };

  this.updateChests = function()
  {
      for (var i = 0; i < this.Chests.length; i++)
      {
// 
//
//Pretty sure this is there the problem is
//
//
           this.Chests[i].update();
           this.Chests[i].drawSlots();
      }
  };  
};

var InventorySlot = function(x, y, manager)
{
    this.x = x;
    this.y = y;
    this.w = 20;
    this.h = 20;
    this.r = 5;
    this.color1 = inventoryColor1;
    this.color2 = inventoryColor2;
    this.manager = manager;

    this.getNewItem = function(item)
    {
        this.item = item;
    };

    // trade items with another slot, using ITS inventory manager's 'holder' variable
    this.replaceItem = function(otherSlot)
    {
        this.otherSlot = otherSlot;         
        this.manager.holder = this.otherSlot.item;
        this.otherSlot.item = this.item;
        this.item = this.manager.holder;
    };
};

// Important Objects
var player = new Player();

// one manages the chests in the world, one manages the slots in the chests!
var chestCreator = new ChestCreator();

var draw = function() 
{
    background(0, 0, 0);
    chestCreator.updateChests();
};

Any help is -Greatly- appreciated since im just a highschooler who is just trying to learn how to do great things with code thumbs up

Expected – 4 Chests should appear, with their inventory slots above them, 4 slots -More chests should be easily addable, and more slots should be able to be added to each chest at will Actual- 4 Slots from the player (still broken but not the current problem) object appear, then it breaks saying ‘update’ is not defined)

Answer

Try changing

this.Chests.push(Chest(random(25,375), random(25,375), random(20,25), random(15,20), random(0,5)));

// note the "new" keyword!
this.Chests.push(new Chest(random(25,375), random(25,375), random(20,25), random(15,20), random(0,5)));

The new keyword is important in properly constructing an object with the correct context. It also properly returns a Chest object to be pushed to your array.

You can find more information with this Stackoverflow answer: https://stackoverflow.com/a/30478240/11240618, as well as here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

Advertisement

Answer