                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

为什么获取id为play得到的变量不能放在最外面，做全局变量呢？我试了这样，onload函数不能直接使用该变量，为什么

var data = ['Phone5', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '50元充值卡', '1000元超市购物券'],

timer = null,

flag=0;

window.onload = function() {

var play = document.getElementById('play'),

stop = document.getElementById('stop');//如果放在外面获取不到

play.onclick = playFun;

stop.onclick= stopFun;

document.onkeyup=function(event){//这里keyup前面有on

event=event||window.event;

if(event.keyCode==13){

if(flag==0){//比较是==

playFun();

flag=1;

}else{

stopFun();

flag=0;

}

function playFun() {

var title = document.getElementById('title'),

play = document.getElementById('play');

clearInterval(timer);

timer = setInterval(function() {

var random = Math.floor(Math.random() * data.length);

title.innerHTML = data[random];

}, 100);

play.style.background="#ccc";

flag=1;

}

function stopFun(){

clearInterval(timer);

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

play.style.background="#333";

flag=0;

}

jazia

2016-09-20

源自：DOM事件探秘 4-5

关注问题我要回答

939

操作

收起

2 回答

慕粉4002810 回答被采纳 +3 积分
2016-09-21

onload 事件是整个页面加载完成后才触发的，

如果你把变量声明放在外面，

脚本运行时页面上的元素还没有加载，

getElementById自然获取不到元素，显示为null。

如果你让<script>作为<body>的最后一个子元素，

那脚本运行前，页面上的元素都加载完毕，这样就不会运行出错了

<body>
    <!--
    各种元素
    -->
    <script>
        //在页面元素加载完成后运行脚本
        
        var play = document.getElementById('play'),
        stop = document.getElementById('stop');
        
        window.onload=function(){
            //代码
        }；
    </script>
</body>