var ball = document.getElementById（「ball」）;返回null對象？

我有3個文件var ball = document.getElementById（「ball」）;返回null對象？

文件1：index.html的

<!DOCTYPE html> 
<html> 
<head> 
    <LINK href="style.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="bounce.js"></script> 
    <title>Bouncing ball</title> 
</head> 
<body> 
<div id='ball'></div> 
</body> 
</html>

文件2：bounce.js

var ball = document.getElementById("ball"); 
var nx = 0; 
var ny = 0; 
setInterval(loop, 1000/30); 
function loop() { 
    nx++; 
    ny++; 
    ball.style.left = nx; 
    ball.style.top = ny; 

}

文件3：style.css中

#ball { 
    position: absolute; 
    border-radius: 50px; 
    width: 50px; 
    height: 50px; 
    background: black; 
}

我在html文件中加載.css和.js。現在我正在試圖讓te div「球」，我想用它做點什麼。在這種情況下，我想讓它再次反彈瀏覽器的邊界。但重點是，我得到錯誤。

遺漏的類型錯誤：無法讀取空

的特性「風格」的bonce.js不能得到elment球。爲什麼不？我究竟做錯了什麼？

來源

2013-01-08 freeji

腳本在Html完成之前加載。將腳本標籤移到body標籤後面。 – asawyer

您正在嘗試它在DOM加載之前獲得的元素。這樣做：

<!DOCTYPE html> 
<html> 
<head> 
    <LINK href="style.css" rel="stylesheet" type="text/css"> 
    <title>Bouncing ball</title> 
</head> 
<body> 
    <div id='ball'></div> 
    <script type="text/javascript" src="bounce.js"></script> 
</body> 
</html>

這是一個很好的做法，包括在底部你所有的JavaScript，因此下載它不會阻止頁面。它會確保你沒有像這樣的錯誤。

來源

2013-01-08 20:59:33

這是因爲您的代碼是在DOM準備好之前執行的。目前這個ID沒有元素。

把你的代碼的onload回調中：

window.onload = function(){ 
    var ball = document.getElementById("ball"); 
    var nx = 0; 
    var ny = 0; 
    setInterval(loop, 1000/30); 
    function loop() { 
     nx++; 
     ny++; 
     ball.style.left = nx; 
     ball.style.top = ny; 
    } 
};

來源

2013-01-08 20:59:28

將您的腳本移動到頁面末尾或將其包裝在onload事件中。您在元素加載之前執行它。

<!DOCTYPE html> 
<html> 
<head> 
    <LINK href="style.css" rel="stylesheet" type="text/css"> 
    <title>Bouncing ball</title> 
</head> 
<body> 
<div id='ball'></div> 
    <script type="text/javascript" src="bounce.js"></script> 
</body> 
</html>

來源

2013-01-08 20:59:34 j08691

var ball = document.getElementById（「ball」）;返回null對象？

回答

相關問題