无法在 onload 属性中声明变量答案

【问题标题】：Unable to declare variable in onload attribute无法在 onload 属性中声明变量
【发布时间】：2016-08-10 10:21:45
【问题描述】：

我正在创建一个网页，其中图像水平移动，直到按下“停止”按钮。

<html>
    <head>
        <script>
            var count = 0;
            function move(){
                image = document.getElementsByTagName("img")[0];
                count++;
                image.style.left = count;
            }
        </script>
    </head>
    <body onload = "var temp = setInterval(move,1)">
        <img src = "facebook_icon.png" style = "position:absolute; left = 0; top:0;">
        <br>
        <button onclick = "clearInterval(temp);">Click here to stop the loop.</button>
    </body>
</html>

当我从 onload 属性中删除 var 关键字时，代码运行良好。新代码：-

<html>
    <head>
        <script>
            var count = 0;
            function move(){
                image = document.getElementsByTagName("img")[0];
                count++;
                image.style.left = count;
            }
        </script>
    </head>
    <body onload = "temp = setInterval(move,1)">
        <img src = "facebook_icon.png" style = "position:absolute; left = 0; top:0;">
        <br>
        <button onclick = "clearInterval(temp);">Click here to stop the loop.</button>
    </body>
</html>

为什么会这样？

【问题讨论】：

var 也在第二个代码中..

标签： javascript html dom-events

【解决方案1】：

这是一个范围问题：在属性中声明的变量不是全局的，例如：

<body onload = "var temp = 'hello'; alert(temp);">
     <button onclick = "alert(temp);">Click</button>
</body>

在上面的示例中，页面加载时，警报将显示消息hello。但是，当您单击按钮时，您会收到此错误Uncaught ReferenceError: temp is not defined。这意味着变量temp 不可访问（不是全局的）。

但是，将值分配给未声明的变量会隐式地将其创建为全局变量，这就是您的第二个示例可以正常工作的原因：

【讨论】：

【解决方案2】：

试试这个。

CSS

<style>
 #container {
            width: 400px;
            height: 400px;
            position: relative;
            background: yellow;
        }
        #animate {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: red;
        }
    </style>

HTML

<div id="container">
            <img src="images/up.png" id="animate"  />
        </div>
        <br/>
        <br/>
        <br/>

        <button onclick="myStopFunction()">Click here to stop the loop.</button>

脚本

<script type="text/javascript">
        function myMove() {
            var elem = document.getElementById("animate");
            var pos = 0;
            var id = setInterval(frame, 1);
            function frame() {
                if (pos == 350) {
                    clearInterval(id);
                } else {
                    pos++;
                    elem.style.top = pos + 'px';
                    elem.style.left = pos + 'px';
                }
            }
        }
        function myStopFunction() {
            var elem = document.getElementById("animate");
            clearInterval(myMove());
        }
    </script>

【讨论】：