JavaScript動態地將畫布標籤添加到HTML文件失敗

我想使用單獨的JavaScript文件動態地將標籤添加到HTML文件中，但始終出現錯誤：無法讀取未定義的屬性'appendChild'。真的很困惑。誰能幫忙？非常感謝！下面是我在.js文件中的代碼：JavaScript動態地將畫布標籤添加到HTML文件失敗

var canvasGraphic = (function(){ 
    return { 
     getCanvas:function(){ 
      var canvas = document.createElement("canvas"); 
      var body = document.getElementsByTagName("body")[0]; 
      body.appendChild(canvas); 
      canvas.style.border = "black solid"; 
     } 
    } 
})(); 

canvasGraphic.getCanvas();

來源

2016-12-14 Zichen Ma

您可以嘗試通過設置您的瀏覽器調試器暫停所有異常來進行調試嗎？該片段在Stack Overflow片段中運行。你在哪裏放你的''？ ''之前或之後？ – zero298

是的，如果我在相同的HTML文件中運行此代碼，添加

你所得到的消息意味着document.getElementsByTagName("body")[0]返回undefined。（這就是爲什麼錯誤消息說appendChild不存在作爲body的方法。）

您的代碼是否在文檔加載之前運行？

在這種情況下，您可能無法找到body元素。如果您可以將腳本元素移動到body標記的底部，請改爲執行此操作（建議here先由A.J.）。

<body> 
    <main>All your content, tags, whatever...</main> 
    <script src="your-code.js"></script> 
</body>

否則，你可能需要一個事件處理程序附加到DOMContentLoaded事件。

此外，請注意，document.body將獲得文檔的主體標記。

document.addEventListener('DOMContentLoaded', function() { 
 
    var canvasGraphic = (function() { 
 
    return { 
 
     getCanvas: function() { 
 
     var canvas = document.createElement("canvas"); 
 
     document.body.appendChild(canvas); 
 
     canvas.style.border = "black solid"; 
 
     return canvas; 
 
     } 
 
    } 
 
    })(); 
 

 
    canvasGraphic.getCanvas(); 
 
})

旁白：你可能從你的getCanvas功能想return canvas

來源

2016-12-14 19:41:46 gyre

好像有什麼不對您的代碼。只需在body標籤的末尾加載腳本文件，或者在DOM的readyState準備就緒後執行代碼。

var canvasGraphic = (function() { 
 
    return { 
 
    getCanvas: function() { 
 
     var canvas = document.createElement("canvas"); 
 
     var body = document.getElementsByTagName("body")[0]; 
 
     body.appendChild(canvas); 
 
     canvas.style.border = "black solid"; 
 
    } 
 
    } 
 
})(); 
 

 
canvasGraphic.getCanvas();

來源

2016-12-14 19:42:12

代碼運行良好對的jsfiddle：https://jsfiddle.net/vazu4wj5/

我建議的唯一改變是改變body.appendChild(canvas);到document.body.appendChild(canvas);，它只是更具體。

下面是最終代碼：

var canvasGraphic = (function(){ 
    return { 
     getCanvas:function(){ 
      var canvas = document.createElement("canvas"); 
      var body = document.getElementsByTagName("body")[0]; 
      document.body.appendChild(canvas); 
      canvas.style.border = "black solid"; 
     } 
    } 
})(); 

canvasGraphic.getCanvas();

來源

2016-12-14 19:44:51

在這種情況下，你真的不需要'var body = document.getElementsByTagName（...'了。 – gyre

@gyre這是真的，謝謝指出。 –

相關問題