kineticjs“无法调用未定义的方法‘appendChild’”答案

【问题标题】：kineticjs "cannot call method 'appendChild' of undefined"kineticjs“无法调用未定义的方法‘appendChild’”
【发布时间】：2012-05-22 12:54:25
【问题描述】：

我才开始使用 kineticJS，但是在关注之后我遇到了一些错误 This教程

我不明白为什么，但我从 KineticJS 文件中得到一个异常：

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

当我一步一步做alert()s，我看到它在之后停止

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

但我最确定的是：

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

我也试过了：

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

我遇到了同样的错误。

谢谢。

编辑：针对下面的 cmets，这是教程中的 Copy-Paste：

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

【问题讨论】：

不确定是否相关，但在示例中，传递给Kinetic.Stage 的 id 是一个容器，其中包含画布元素，而不是画布元素本身的 id
我没有看到带有 id 容器的 div 内的哪里有 canvas 元素。那是正文中唯一的标签
示例中的脚本：var stage = new Kinetic.Stage("container", 578, 200); 示例中的 html：<div id="container"><canvas ...></canvas><canvas ...></canvas>...</div>
你是想骗我还是什么。
不，我从您在问题中输入的链接发布代码。

【解决方案1】：

因此，@Gleeb 自己的回答反映了 KineticJS v4.0.x 中的当前实践，而不是早期 v3 时代制作的那些文档/教程。

应该为向后兼容性提出拉取请求......类似

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

...在舞台构造函数中。

【讨论】：

【解决方案2】：

问题在于舞台的实际创建。

而不是

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

我做了

var stage = new Kinetic.Stage({ 容器：“容器”，宽度：578，身高：200 });

【讨论】：

【解决方案3】：

尝试在window.onload 事件（如示例中）运行您的脚本并使用console.log() 调试您的变量/对象。

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

...并使用div 而不是canvas。

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

【讨论】：

我需要决定批准你或我的答案。你能解释一下为什么使用 window.onload 比 jquery 的 $(document).ready 更好吗？因为我发布的内容实际上解决了它。
您的问题没有说明 jQuery，但我建议您使用准备好的文档（如果可用）。重要的是 DOM 在您尝试访问它之前已经完成加载。