为什么document.getElementById返回空值？
[英]Why is document.getElementById returning a null value?
问题描述
I've debugged my code and realized that a method in my Javascript isn't working properly. 
我调试了代码，意识到Javascript中的方法无法正常工作。 Anyone have an idea why? 有人知道为什么吗？
index.html : 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 : main.js ：
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
The result of document.getElementById("tetrisBoard") is a null value. document.getElementById("tetrisBoard")的结果为空值。 Why? 为什么？
3 个解决方案
解决方案1
5 已采纳 2013-06-22 21:58:56
Because you're calling your code prior to the elements existing. 因为您要在现有元素之前调用代码。 Put the script right before the closing body tag and you'll be fine. 将脚本放在结束body标记之前，就可以了。
解决方案2
1 2013-06-22 22:14:00
Another solution is to do something like this: 另一个解决方案是执行以下操作：
<!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>
Then, in your main.js use something like this: 然后，在main.js使用如下代码：
function setup() {
// Your code here
}
The good thing about this is that you don't have to put the script tag in an unintuitive and unstandard spot (such as right before the end of the body). 这样做的好处是，您不必将script标签放在不直观且不标准的位置（例如，在正文末尾之前）。
解决方案3
0 2013-06-22 22:08:18
Also you could make the script to wait until all the DOM it is loaded... like this: 您也可以使脚本等待直到加载了所有DOM ...像这样：
using jquery
$(document).ready(function(){
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
});
vanilla 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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.