Easeljs - Need help adding multiple child containers

[doppler]

I am having the hardest time adding a list of objects to my container! For whatever reason, only the last container object appears on the left side of the screen. Any clue as to why only one container is being drawn?

If anyone is interested in testing the program, here is a link to the related commit.

Parent Container:

(function (window) {

	function ChestManager() {
		container.Container_constructor();
        container.addChest(640,100,1,1,"topClosed");
        container.addChest(1100,360,1,1,"sideClosed");
        container.addChest(640,620,1,1,"bottomClosed");
        container.addChest(180,360,-1,1,"sideClosed");
	}

	//instance of class
	var container = new createjs.extend(ChestManager, createjs.Container);

    //shared spritesheet properties
    var manifest = [{src: "chests.png", id: "chests"}];
    container.loader = new createjs.LoadQueue(false);
    container.loader.addEventListener("complete", handleComplete);
    container.loader.loadManifest(manifest, true, "img/");

    //configure after loaded
    function handleComplete() {
        container.spriteSheet = new createjs.SpriteSheet({
            framerate: 4,
            images: [container.loader.getResult("chests")],
            frames: [[0,0,159,132,0,79.25,65.65],[159,0,193,107,0,98.25,40.650000000000006],[352,0,193,107,0,98.25,40.650000000000006],
                    [545,0,113,147,0,56.5,73.4],[658,0,180,149,0,56.5,75.4],[838,0,180,149,0,56.5,75.4], //center bounds
                    [0,149,116,97,0,57.25,47.75],[116,149,111,94,0,55.25,44.75],[227,149,111,94,0,55.25,44.75]],
            animations: {
                //"run": [0, 1, "run"],
                topClosed: [6], topOpenReward: [7], topOpenNothing: [8],
                sideClosed: [3], sideOpenReward: [4], sideOpenNothing: [5],
                bottomClosed: [0], bottomOpenReward: [1], bottomOpenNothing: [2]
            }
        });
    }

    //update
	container.tick = function (event) {
        for (i=0; i<container.children.length; i++){
            if (container.getChildAt(i).isClicked()){
                container.removeChest(i);
            }
        }
    }
    container.addChest = function (x,y,scaleX,scaleY,frame){
        container.addChild(new Chest(x,y,scaleX,scaleY,container.spriteSheet,frame)); //add to stage
        container.getChildAt(container.children.length-1).sprite.on("click", function(evt){ container.getChildAt(container.children.length-1).click(); });
    }
    container.removeChest = function(i){
        container.getChildAt(i).sprite.removeEventListener("click");
        container.removeChildAt(i);
    }
	window.ChestManager = createjs.promote(ChestManager, "Container");
}(window));

Child Container:

(function (window) {

    //constructors
    function Chest(){
        container.Container_constructor();
    }
    function Chest(x,y,scaleX,scaleY,spriteSheet,frame){
        container.Container_constructor();
        container.initChest(x,y,scaleX,scaleY,spriteSheet,frame);
    }

    //instance of class
    var container = new createjs.extend(Chest, createjs.Container);

    //initialize Chest
	container.initChest = function (x,y,scaleX,scaleY,spriteSheet,frame) {
        container.x = x;
        container.y = y;
        container.sprite = new createjs.Sprite(spriteSheet, frame);
        container.sprite.scaleX = scaleX;
        container.sprite.scaleY = scaleY;
        container.sprite.gotoAndStop(frame);
        container.customText = new CustomText(0,0,scaleX,scaleY,"car");
        container.addChild(container.sprite);
        container.addChild(container.customText);
	}
	//public functions
    container.isClicked = function(){ return container.clicked; }
    container.click = function() { container.clicked=true; }

	window.Chest = createjs.promote(Chest, "Container");
}(window));

Result (ignore the backwards 'R' haha)

[mmcs]

You are using the prototype object "container" instead of the instance object "this" inside constructors and methods to affect the properties. Resulting in all the instances having the same x, y properties. (You can check this debuging on the browser)

change "container" to "this" inside the constructor functions and class methods when using properties, example:

function ChestManager() { 

this.Container_constructor(); 

this.addChest(640,100,1,1,"topClosed"); 

this.addChest(1100,360,1,1,"sideClosed"); 

this.addChest(640,620,1,1,"bottomClosed"); 

this.addChest(180,360,-1,1,"sideClosed"); 

}

 

[doppler]

Hi mmcs! That solved a massive issue I was having with this game! I feel like I am better understanding js prototyping as whole.

My next goal is to nest more 'containers' inside each other...I may have a question about that later. Thanks again!

Edit: SOLVED! Thank you again!

Edited May 12, 2016 by doppler
fixed