我刚开始在学校上课,所以请原谅我完全缺乏基础知识.这个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>
问题是你想得到一个尚不存在的元素
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空值
原始值,表示故意缺少任何对象值