爲什麼document.getElementById返回空值？

我調試了我的代碼，並意識到我的Javascript中的方法無法正常工作。任何人有一個想法爲什麼？爲什麼document.getElementById返回空值？

index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Tetris</title> 
<link rel="stylesheet" href="css/app.css"> 
<script type="text/javascript" src="js/main.js"></script> 
</head> 
<body> 
<canvas id="tetrisBoard" width="800" height="600"> 
    Your browser does not support HTML 5. 
</canvas> 
<p> 
</p> 
</body> 
</html>

main.js：

board = document.getElementById("tetrisBoard")                                        
ctx = board.getContext("2d") 
ctx.fillStyle = "rgb(200, 0, 0)" 
ctx.fillRect 10, 10, 55, 50

的document.getElementById("tetrisBoard")結果是一個空值。爲什麼？

來源

2013-06-22 duber

因爲您在現有元素之前調用您的代碼。把腳本放在關閉的身體標記之前，你會沒事的。

來源

2013-06-22 21:58:56 j08691

謝謝！完美的作品！我會在未來嘗試提出更有趣的問題。 – duber

你也可以讓腳本等到所有加載該文件的DOM ...是這樣的：使用

jQuery的

$(document).ready(function(){ 
    board = document.getElementById("tetrisBoard")                                        
ctx = board.getContext("2d") 
ctx.fillStyle = "rgb(200, 0, 0)" 
ctx.fillRect 10, 10, 55, 50 
    });

香草的JavaScript：

document.addEventListener("DOMContentLoaded", function() { 
     board = document.getElementById("tetrisBoard")                                        
ctx = board.getContext("2d") 
ctx.fillStyle = "rgb(200, 0, 0)" 
ctx.fillRect 10, 10, 55, 50 
     }, false);

來源

2013-06-22 22:08:18 jycr753

另一種解決方案是做這樣的事情：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Tetris</title> 
     <link rel="stylesheet" href="css/app.css"> 
     <script type="text/javascript" src="js/main.js"></script> 
    </head> 
    <body onload="setup();"> 
     <canvas id="tetrisBoard" width="800" height="600"> 
      Your browser does not support HTML 5. 
     </canvas> 
     <p> 
     </p> 
    </body> 
</html>

然後，在你main.js使用這樣的事情：

function setup() { 
    // Your code here 
}

關於這個的好處是，你不必把腳本標記在一個不直觀和不規範的地方（比如在身體結束之前）。

來源

2013-06-22 22:14:00

爲什麼document.getElementById返回空值？

回答

相關問題