為什么document.getElementById返回空值？

Question

我調試了代碼，意識到Javascript中的方法無法正常工作。 有人知道為什么嗎？

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")的結果為空值。 為什么？

Answer 1

因為您要在現有元素之前調用代碼。 將腳本放在結束body標記之前，就可以了。

Answer 2

另一個解決方案是執行以下操作：

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

這樣做的好處是，您不必將script標簽放在不直觀且不標准的位置（例如，在正文末尾之前）。

Answer 3

您也可以使腳本等待直到加載了所有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);

為什么document.getElementById返回空值？

問題描述

3 個解決方案

解決方案1
5 已采納 2013-06-22 21:58:56

解決方案2
1 2013-06-22 22:14:00

解決方案3
0 2013-06-22 22:08:18

為什么document.getElementById返回空值？

問題描述

3 個解決方案

解決方案1 5 已采納 2013-06-22 21:58:56

解決方案2 1 2013-06-22 22:14:00

解決方案3 0 2013-06-22 22:08:18

解決方案1
5 已采納 2013-06-22 21:58:56

解決方案2
1 2013-06-22 22:14:00

解決方案3
0 2013-06-22 22:08:18