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

来源:4-5 [DOM事件] 抽奖系统(下)

jazia

2016-09-20 20:52

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;

}


写回答 关注

2回答

  • 慕粉4002810
    2016-09-21 07:14:58
    已采纳

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

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

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

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


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

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

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


    jazia

    非常感谢!

    2016-09-22 10:07:10

    共 1 条回复 >

  • jazia
    2016-09-22 10:08:27

    所以声明数组,定时器,flag放在外面就可以,因为这些可以不用等页面加载完

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99544 学习 · 1197 问题

查看课程

相似问题