Javascript无法访问HTML（左右移动对象）

user6101277 发表于 Dev

用户名

我的档案：

index.html
client
   css
     style.css
   js
     javascript.js

index.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
<script type="text/javascript" src="client/js/javascript.js"></script>

</head>
<body>
<div id="container">
     <div id="guy"></div>
</div>

</body>
</html>

javascript.js

var guy=document.getElementById('guy');
var container=document.getElementById('container');

var guyLeft=0;

function anim(e){
if(e.keyCode==39){
    guyLeft +=2;
    guy.style.left = guyLeft + 'px';

}
if(e.keyCode==37){
    guyLeft -=2;
    guy.style.left = guyLeft + 'px';
}   
}
document.onkeydown =anim;

style.css

#container{
height:400px;
width:600px;
outline:1px solid black;
position: relative;
}
#guy{
position: absolute;
height:50px;
width:50px;
outline:1px solid black;
background-color:red;
left:0;
}

1）所以请大家帮忙。我只想左右移动对象..当我将代码放在index.html之间时，它可以工作，但在单独的javascript.js类中却不起作用。谢谢。

弗朗切斯科

1）您必须在页面底部加载JavaScript。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>blablabla</title>
        <link rel="stylesheet" type="text/css" href="client/css/style.css">
    </head>
    <body>
        <div id="container">
            <div id="guy"></div>
        </div>
        <script type="text/javascript" src="client/js/javascript.js"></script>
    </body>
</html>

2）上下移动：

var guy = document.getElementById('guy');
var container = document.getElementById('container');

var guyLeft = 0;
var guyTop = 0;

function anim(e){
    if(e.keyCode==39){
        guyLeft +=2;
        guy.style.left = guyLeft + 'px';

    }
    if(e.keyCode==37){
        guyLeft -=2;
        guy.style.left = guyLeft + 'px';
    }

    // UP
    if(e.keyCode==38) {
        guyTop -=2;
        guy.style.top = guyTop + 'px';
    }

    // DOWN
    if(e.keyCode==40) {
        guyTop +=2;
        guy.style.top = guyTop + 'px';
    }
}

document.onkeydown = anim;