Почему 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 возвращает нулевое значение?

ответ

Смежные вопросы