Question

我有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”，我想用它做点什么。在这种情况下，我想让它再次反弹浏览器的边框。但重点是，我得到了错误。

未捕获的TypeError：无法读取null的属性'style'

bonce.js无法得到elment球。为什么不？我做错了什么？

Answer 1

那是因为您的代码在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;
    }
};

Answer 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包含在底部是一个很好的做法，因此下载时不会阻止页面。它会确保你没有这样的错误。

Answer 3

将脚本移动到页面末尾或将其包装在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>

var ball = document.getElementById（“ball”）;返回null对象？

3 个答案: