Question

我刚开始在学校上课，所以请原谅我完全缺乏基础知识。这个JS只有在我把它放在HTML代码之后才有效，而不是我把它放在headtag中。 window.onload不应该照顾那个吗？有人可以解释一下是什么问题吗？提前谢谢！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #field {
        width: 600;
        height: 600;
        background-color: black;
        position: relative;
    }

    #player {
        width: 50;
        height: 50;
        background-color: red;
        position: absolute;
        left: 0px;
        top: 0px;
    }
</style>
<script>
    var player = document.getElementById("player");
    var playerLeft = 0;
    var PlayerTop = 0;

    function move(e) {
        if (e.keyCode == 68) {
            playerLeft += 10
            player.style.left = playerLeft + "px";
        }
        if (e.keyCode == 65) {
            playerLeft -= 10
            player.style.left = playerLeft + "px";
        }
        if (e.keyCode == 87) {
            PlayerTop -= 10
            player.style.top = PlayerTop + "px";
        }
        if (e.keyCode == 83) {
            PlayerTop += 10
            player.style.top = PlayerTop + "px";
        }
    }


    function loadEvents() {
        document.onkeydown = move;
    }
    window.onload = loadEvents;
</script>
</head>
<body>

<div id="field">
    <div id="player">
    </div>
</div>

Answer 1

问题是你想获得一个尚不存在的元素

var player = document.getElementById("player");

将此行放在加载窗口时调用的loadEvents()函数中。

注意：避免错误（如果#player元素不存在）添加if (player) { ... }

<script>
  var player = null;
  var playerLeft = 0;
  var playerTop = 0;

  function move(e) {
    if (e.keyCode == 68) {
        playerLeft += 10
        player.style.left = playerLeft + "px";
    }
    if (e.keyCode == 65) {
        playerLeft -= 10
        player.style.left = playerLeft + "px";
    }
    if (e.keyCode == 87) {
        playerTop -= 10
        player.style.top = playerTop + "px";
    }
    if (e.keyCode == 83) {
        playerTop += 10
        player.style.top = playerTop + "px";
    }
  }


  function loadEvents() {
    player = document.getElementById("player");
    if (player) {
      document.onkeydown = move;
    }
  }
  window.onload = loadEvents;
</script>

修改

对于@tmslnz

var player = null有点多余，因为如果没有找到元素，getElementById将返回null。

来自ECMAScript2015规范

4.3.10未定义值

当变量尚未赋值时使用的原始值

4.3.12空值

表示故意缺少任何对象值的原始值

请参阅此thread和this answer

Answer 2

这在文档加载之前运行。浏览器之前的AKA有任何关于标记的线索。

var player = document.getElementById("player");
…

每次查询DOM时（将其视为浏览器看到的HTML），您需要等待ready。

如果您在结束</body>标记之前将文档放在文档的最末端，那么您的脚本可能会正常，因为届时浏览器将有机会发现#player。< / p>

您需要做的是找到一种方法来构建脚本，以便他们在准备好之前不会尝试访问它。

如果您使用的是jQuery，那么简单的方法是将{em>所有放在onload内的$(function(){ … })内。

或者，如果你更喜欢控制，你可以使用像init这样的功能，用于＆＃34;启动引擎后坦克是填充＆＃34; （使用蹩脚的比喻......）

例如：

var player;
var playerLeft = 0;
var playerTop = 0;

function init () {
    player = document.getElementById("player");
    loadEvents();
}

function move(e) {
    if (e.keyCode == 68) {
        playerLeft += 10
        player.style.left = playerLeft + "px";
    }
    if (e.keyCode == 65) {
        playerLeft -= 10
        player.style.left = playerLeft + "px";
    }
    if (e.keyCode == 87) {
        playerTop -= 10
        player.style.top = playerTop + "px";
    }
    if (e.keyCode == 83) {
        playerTop += 10
        player.style.top = playerTop + "px";
    }
}

function loadEvents() {
    document.onkeydown = move;
}

window.onload = init;

为什么我的JS只在我把它放在HTML之后才能工作，即使我有一个window.onload？

2 个答案:

修改