CODEWITHSUNDEEP
javascripthtmlkineticjs
Gleeb
Gleeb

Reputation: 11289

kineticjs "cannot call method 'appendChild' of undefined"

I am only starting to use kineticJS but I am getting some errors after following This tutorial

I don't understand why but I am getting an exception from inside the KineticJS file:

"Uncaught TypeError: cannot call method 'appendChild' of undefined".

When I do a step by step alert()s, I see that it stops after

var stage = new Kinetic.Stage("rightSide", 578, 200);

but I most definitively have:

<canvas id="rightSide">
</canvas>

I also tried:

<div id="rightSide">
</div>

and I am getting the same error.

Thanks.

Edit: in response to the comments below, this is Copy-Paste from the tutorial:

</head>
<body>
<div id="container">
</div>
</body>

Upvotes: 2

Views: 2464

Answers (3)

Ben Crox
Ben Crox

Reputation: 36

There is a change in Kinetic.Stage constructor since March https://github.com/ericdrowell/KineticJS/commit/7ced50f6943af544dbdfc95883ec41728db1d3bd

Thus @Gleeb 's own answer reflects current practice in KineticJS v4.0.x instead of those docs / tutorials made in the early v3 era.

Should make a pull request for backward compatibility.. something like

if(arguments.length>1){
 config.container =  arguments[0];
 config.width = arguments[1];
 config.height = arguments[2];
}

... in the Stage constructor.

Upvotes: 2

Gleeb
Gleeb

Reputation: 11289

the problem was with the actual creation of the stage.

instead of

var stage = new Kinetic.Stage("container", 578, 200);

i did

var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });

Upvotes: 2

Stefan
Stefan

Reputation: 5662

Try to run your script at the window.onload event (as in the example) and use console.log() to debug your variables/objects.

window.onload = function() {
  var stage = new Kinetic.Stage("rightSide", 578, 200);
  console.log('stage =', stage); // DEBUG
};

...and use the div and not the canvas.

<div id="rightSide"></div>

You´ll find more tutorials and the official API documentation at http://www.kineticjs.com/docs/symbols/Kinetic.Stage.php

Upvotes: 1

Related Questions