1

我调试了我的代码并意识到我的 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")是一个空值。为什么？

4

3 回答 3

5

因为您在元素存在之前调用您的代码。将脚本放在结束正文标记之前，你会没事的。

于 2013-06-22T21:58:56.503 回答
1

另一种解决方案是执行以下操作：

<!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-22T22:14:00.400 回答
0

你也可以让脚本等到它加载完所有 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-22T22:08:18.323 回答