Javascript元素创建画布时出现错误

An error in the creation of canvas by Javascript elements

本文关键字：错误 布时出 元素 创建 Javascript      更新时间：2023-09-26

我想创建一个只有JavaScript el的画布但是我发现了一个错误:

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);

您可能在文档之前运行脚本。正文已创建。

将脚本放在body标签中，或者使用document.addEventListener("load",function(){ your script })，以便代码在页面加载并创建body元素时运行

<!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>

完整工作代码

相关文章：