javascript全局变量不能存储值（如果它暗示从HTML元素中提取值）？

Question

好的，因此我有了此功能，该功能使用户可以使用键盘的箭头键左右左右移动苍蝇。 下面显示的代码有效（我仅使用Internet Explorer测试我的脚本）：

<html>

<head>

<script language="javascript" text="text/javascript">

    var coordenadax=300;
    var coordenaday=250;

function coordenadas(){

    var key=window.event.keyCode;
    switch (key) {
        case 37: coordenadax=coordenadax-10; break;
        case 38: coordenaday=coordenaday-10; break;
        case 39: coordenadax=coordenadax+10; break;
        case 40: coordenaday=coordenaday+10; break;
}

mosca.style.left=coordenadax;
mosca.style.top=coordenaday;

}

</script>

</head>

<body onkeyDown="coordenadas()">

<div id="mosca" style="width:48px; height:34px; top:250px; left:300px; position:relative; 
 z-index:1;">
    <img src="fly.png">
</div>

</body>

</html>

但是，如果我更改：

<script language="javascript" text="text/javascript">

    var coordenadax=300;
    var coordenaday=250;

function coordenadas(){

至：

<script language="javascript" text="text/javascript">

    var coordenadax=mosca.style.left;
    var coordenaday=mosca.style.top;

function coordenadas(){

甚至：

<script language="javascript" text="text/javascript">

    var coordenadax=document.getElementById('mosca').style.left;
    var coordenaday=document.getElementById('mosca').style.top;

function coordenadas(){

为了从div元素中检索这些值，而不仅仅是将它们提供给全局变量，那么动态操作根本就不会移动，我只是不明白为什么...

Answer 1

页面加载时，您的JavaScript正在执行。 由于JS代码位于实际标记之前，因此脚本在技术上#mosca元素存在之前#mosca执行。

通过将脚本放在<body>最底部来解决此问题

另外， mosca对象将不仅仅存在-您需要使用document.getElementById进行设置：

var mosca = document.getElementById('mosca');

Answer 2

定义javascript脚本时，它是“就地”执行的（浏览器会创建对象并按照定义的顺序执行代码）。 当浏览器执行时：

var coordenadax=document.getElementById('mosca').style.left;
var coordenaday=document.getElementById('mosca').style.top;

尚未创建ID为“ mosca”的对象（您在脚本之后创建该对象），并且它会丢弃错误。 （检查开发者的控制台，可能在其中）。

javascript全局变量不能存储值（如果它暗示从HTML元素中提取值）？

问题描述

2 个解决方案

解决方案1
1 2014-12-02 19:17:07

解决方案2
1 已采纳 2014-12-02 19:18:22

javascript全局变量不能存储值（如果它暗示从HTML元素中提取值）？

问题描述

2 个解决方案

解决方案1 1 2014-12-02 19:17:07

解决方案2 1 已采纳 2014-12-02 19:18:22

解决方案1
1 2014-12-02 19:17:07

解决方案2
1 已采纳 2014-12-02 19:18:22