0

私は3つのファイルを持っています

ファイル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 "ball"を取得しようとしていますが、それを使って何かをしたいと思っています。この場合、ブラウザの境界線に逆らって跳ね返らせたいと思います。しかし、要点は、エラーが発生しているということです。

Uncaught TypeError：nullのプロパティ'style'を読み取れません

bonce.jsは要素ボールを取得できません。なぜだめですか？私は何が間違っているのですか？

4

3 に答える 3

2

これは、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-08T20:59:28.583 に答える
2

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-08T20:59:33.487 に答える
2

スクリプトをページの最後に移動するか、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-08T20:59:34.273 に答える