CODEWITHSUNDEEP
javascriptjquerydebuggingcreatejseaseljs
user3871
user3871

Reputation: 12718

Uncaught TypeError: child.dispatchEvent is not a function EaselJS

I'm trying to create a card game using EaselJS. I'm getting Uncaught TypeError: child.dispatchEvent is not a function EaselJS error when trying to add an object class to the stage it seems. I am using jQuery, but I've followed this SO post to remove the jQuery conflict:

    <script src="lib/jQuery.js"></script>
    <script>jQuery.noConflict();</script>

I'm also using RaphaelJS, but am phasing it out. I thought this library may also be a conflict, so I simply completely removed the jQuery and raphaelJS inclusions and still had the same error.

Code snippets:

this.tableCanvas = new createjs.Stage('Table');

function createDeck () {

        for (var i = 0; i < suits.length; i++) {
                for (var j = 0; j < values.length; j++) {
                    var card_data = { ... };
                    var card = new Card(this.tableCanvas, card_data);
                    ...
                }
         }
         this.tableCanvas.update();

Card class: I'm console logging the canvas to ensure I am not losing context and it is in fact logging the correct Stage object.

var Card = function(canvas, args) {

    var graphics = new createjs.Graphics();
    graphics.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);
    this.shape = new createjs.Shape(graphics);
    this.set = new createjs.Container();
    this.set.addChild(this.shape);
    this.set.x = this.x;
    this.set.y = this.y;
    console.log('canvas', canvas);  //outputs createJS Stage object
    canvas.addChild(this); //Error seems to be because of this

I've also tried adding the card inside the creation loop:

for ...
     for ...
         var card = new Card(this.tableCanvas, card_data);
         this.tableCanvas.addChild(card); 
     }
}

Same error.

HTML snippet:

<body>
    <div id="GameBoard">
        <canvas id="Table" width="1000" height="1000"></canvas>
    </div>
</body>

Error: createjs-2015.11.26.combined.js:7322

p.addChild = function(child) {
    if (child == null) { return child; }
    var l = arguments.length;
    if (l > 1) {
        for (var i=0; i<l; i++) { this.addChild(arguments[i]); }
        return arguments[l-1];
    }
    if (child.parent) { child.parent.removeChild(child); }
    child.parent = this;
    this.children.push(child);
    child.dispatchEvent("added"); //ERROR HERE
    return child;
};

Upvotes: 2

Views: 1962

Answers (1)

Lanny
Lanny

Reputation: 11294

I think this is because you are adding Card instances to the stage. Stage children need to be DisplayObjects. You should be adding this.set to the canvas instead.

I would also recommend your second approach.

this.tableCanvas.addChild(card.set);

Upvotes: 1

Related Questions