通过JavaScript元素在创作油画的误差

我想只有JavaScript元素创建一个画布，但我发现了一个错误：通过JavaScript元素在创作油画的误差

Uncaught TypeError: Cannot read property 'appendChild' of null

我的JavaScript代码是：

// create the canvas on the page : 
var myPageCanvas = document.createElement("canvas"); 

    // Assigne Id to thin canvas :   
myPageCanvas.id = 'c'; 

// custumize canvas :  
myPageCanvas.height = 300; 
myPageCanvas.width = 500; 
myPageCanvas.style.display = "block"; 
myPageCanvas.style.margin = "50px auto"; 

// Add the canvas on the page : 
document.body.appendChild(myPageCanvas);

来源

2016-10-22 Abdallah.BeraYda

你复制和粘贴代码，或者你重写了它？我在代码中看不到任何问题。 – youssouf

当我使用谷歌浏览器的控制台，说这是不能读属性'appendChild'null，我的代码是在问题=） –

您的网页似乎确实包含元素或您没有关闭标记。 – youssouf

<!DOCTYPE html> 
<html> 
<body> 
<p>Click the button to append canvas.</p> 

<button onclick="myFunction()">Append</button> 

<script> 
function myFunction() { 
    var myPageCanvas = document.createElement("canvas"); 

    // Assigne Id to thin canvas :   
myPageCanvas.id = 'c'; 

// custumize canvas :  
myPageCanvas.height = 300; 
myPageCanvas.width = 500; 
myPageCanvas.style.backgroundColor = "lightgrey"; 
myPageCanvas.style.display = "block"; 
myPageCanvas.style.margin = "50px auto"; 

// Add the canvas on the page : 
document.body.appendChild(myPageCanvas); 
} 
</script> 

</body> 
</html>

完整的工作代码

来源

2016-10-22 13:20:36

谢谢===>解决 –

最受欢迎:)您发布的代码没有问题。我想这里有一些语法问题或者你没有发布的东西。所以我写了完整的代码。 –

问题是JS代码在加载窗口之前执行，因此您的答案只能通过在按钮上执行代码来间接解决问题。 Blindman67的答案更直接，因此更通用。 – markE

你很可能运行脚本的document.body的有蜜蜂前创建。

要么把脚本在身上的标签，或者使用document.addEventListener("load",function(){ your script })这样，当页面加载的代码运行和身体元素创建

来源

2016-10-22 13:24:12 Blindman67

通过JavaScript元素在创作油画的误差

回答

相关问题