为什么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返回空值？

回答

相关问题