由document.createElement（'canvas1'）创建时获取'canvas1'属性时出错

Question

我正在尝试制作一个进度条，用于在游戏中生成地图时进行操作。这里的问题是代码片段：

COREHTML5.RoundedRectangle.prototype = {

createCanvas: function() { 
    var canvas1 = document.createElement("canvas1"); 
    this.context1 = canvas1.getContext; 
    return canvas1; 
}, 
createDOMElement: function() { 
    this.domElement = document.createElement("div"); 
    this.domElement.appendChild(this.context1.canvas1); 
}, 

我得到的错误：JavaScript的运行时错误：无法获取的未定义或空引用属性“canvas1”。这个错误发生在代码片段的最后一行。

Answer 1

I get the error: JavaScript Runtime Error: unable to get property 'canvas1' of undefined or null reference. This error happens in the last line of the code snippet.

更换

var canvas1 = document.createElement("canvas1"); 

与

var canvas1 = document.createElement("canvas");//observe that '1' is removed 

因为canvas1是不是一个有效的HTML元素

完整的例子可能是

function a(){} 
a.prototype.createCanvas = function() { 
    var canvas1 = document.createElement("canvas"); 
    this.context1 = canvas1.getContext; 
    return canvas1; 
} 
a.prototype.createDOMElement = function() { 
    this.domElement = document.createElement("div"); 
    this.domElement.appendChild(this.context1.canvas1); 
} 

请确保您在做appendChild之前先将div添加到DOM。