畫布id沒有在javascript中被識別

Question

我試圖找到為什么我的html canvas元素在javascript中無法識別。

我不確定為什么我的canvas元素為null。 我在html中定義它，並且只在觸發DOMContentLoaded事件時運行javascript。

index.html的：

<!DOCTYPE html>
<html>
   <head>
      <title>Whiteboard</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <canvas id="canvas">Your browser doesn't support "canvas".</canvas>
      <!--<script src="/node_modules/socket.io/socket.io.js"></script>-->
      <script type="text/javascript" src="client1.js"></script>
   </body>
</html>

client1.js：

 document.addEventListener("DOMContentLoaded", function() {
       var mouse = { 
          click: false,
          move: false,
          pos: {x:0, y:0},
          pos_prev: false
       };
       // get canvas element and create context
       document.write("Hetoo   ");
       var canvas  = document.getElementById("canvas");
       if(canvas)
       {
           document.write("got her.");
       }
       else
       {
           document.write(canvas);
       }
       document.write("  Hepoo  ");
       var context = canvas.getContext('2d');
       document.write("Heyoo  ");
 }

網頁輸出：

Hetoo null Hepoo

我期待畫布不是null，但javascript由於某種原因無法識別。

Answer 1

有關為何發生這種情況的解釋，請參閱： JavaScript Document.Write替換所有正文內容

快速修復：使用console.log替換client1.js中的document.write調用

document.addEventListener("DOMContentLoaded", function() {
   var mouse = {
      click: false,
      move: false,
      pos: {x:0, y:0},
      pos_prev: false
   };
   // get canvas element and create context
   var mouse = {
      click: false,
      move: false,
      pos: {x:0, y:0},
      pos_prev: false
   };
   // get canvas element and create context
   console.log("Hetoo   ");
   var canvas  = document.getElementById("canvas");
   if(canvas)
   {
       console.log("got her.");
   }
   else
   {
       console.log(canvas);
   }
   console.log("  Hepoo  ");
   var context = canvas.getContext('2d');
   console.log("Heyoo  ");
})

您還應該考慮將腳本標記移動到head元素中，並使用async或defer屬性來控制它們的加載方式（如有必要）

Answer 2

我正在獲取上下文對象嘗試下面的代碼並讓我知道

 var canvas = document.getElementById("canvas"); console.dir(canvas.getContext('2d'));

 <canvas id="canvas">Your browser doesn't support "canvas".</canvas>

Answer 3

如果你刪除DOMContentLoaded監聽器它應該工作，看到這個答案：

DOMContentLoaded事件中的代碼無法正常工作

畫布id沒有在javascript中被識別

問題描述

3 個解決方案

解決方案1
1

解決方案2
0 2019-06-09 19:11:09

解決方案3
-1 2019-06-09 18:32:55

畫布id沒有在javascript中被識別

問題描述

3 個解決方案

解決方案1 1

解決方案2 0 2019-06-09 19:11:09

解決方案3 -1 2019-06-09 18:32:55

解決方案1
1

解決方案2
0 2019-06-09 19:11:09

解決方案3
-1 2019-06-09 18:32:55