前几天做一个点击按钮，就实现切换图片效果的小demo时，代码看上去没问题，就是达不到效果。让我百思不得其解。

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <img src="img/1.png"/>

        <input type="button" id="btn" value="改变图片" onclick="changePic()" />

    </body>

    <script type="text/javascript">

        window.onload=function(){

            //1.获取img标签

            var img=document.getElementsByTagName("img");

            //2.定义count来存对应图片---图片名字分别为1,2,3,4

            var count=2;

            //3.切换图片函数

            function changePic(){

                if(count<4){

                    img[0].src="img/"+count+".png";

                    count++;

                }else if(count==4){

                    img[0].src="img/"+count+".png";

                    count=1;

                }

            }

        }

    </script>

</html>

一直以来，我们写前端代码时，第一件事就是写window.onload的呀！为什么会出问题呢？

后来，上网去查，才得知是因为changePic（）放在window.onload中就变成了一个局部函数了，不能实现在标签中的直接调用。

去掉window.onload就可以使用了。

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <img src="img/1.png"/>

        <input type="button" id="btn" value="改变图片" onclick="changePic()" />

    </body>

    <script type="text/javascript">

        //1.获取img标签

        var img=document.getElementsByTagName("img");

        //2.定义count来存对应图片---图片名字分别为1,2,3,4

        var count=2;

        //3.切换图片函数

        function changePic(){

            if(count<4){

                img[0].src="img/"+count+".png";

                count++;

            }else if(count==4){

                img[0].src="img/"+count+".png";

                count=1;

            }

        }

    </script>

</html>

如果你非要用window.onload，就使用–对象.函数–的方法

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <img src="img/1.png"/>

        <input type="button" id="btn" value="改变图片" />

    </body>

    <script type="text/javascript">

        window.onload=function(){

            //1.获取img标签

            var img=document.getElementsByTagName("img");

            //2.定义count来存对应图片---图片名字分别为1,2,3,4

            var count=2;

            //3.切换图片函数

            document.getElementById("btn").onclick=function(){

                if(count<4){

                    img[0].src="img/"+count+".png";

                    count++;

                }else if(count==4){

                    img[0].src="img/"+count+".png";

                    count=1;

                }

            }

        }

    </script>

</html>

JavaScript：window.onload问题的更多相关文章

  1. JavaScript window.onload 事件和 jQuery ready 函数有何不同？

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  2. javascript window.onload 加载多个函数的方法

    用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或 ...

  3. jQuery $(document).ready()和JavaScript window.onload()事件的区别

    一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...

  4. JavaScript: window.onload = function() {} 里面的函数不执行

    问题:写了一个最简单的页面.在script标签中使用的 window.onload = function() { function add() { //... } } 页面上:<div oncl ...

  5. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  7. JQuery执行函数与window.onload函数

    JavaScript和HTML之间的交互: 1.通过用户和浏览器操作页面时引发的事件来处理的. 2.当文档或者它的某些元素发生某些变化时,浏览器会自动生成一个事件. 例如:当浏览器装载完一个文档后,会 ...

  8. window.onload() 等待所有的数据加载都完成之后才会触发

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 浏览器事件window.onload、o…

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

随机推荐

  1. sql中 datediff的使用

    简介:我们在sql中经常要判断年或者月或者日是否相等,我们可以用datediff函数,使用很方便 datediff:判断年或月或日或周.星期.小时.分钟等的差别数使用格式: DATEDIFF(date ...

  2. AngularJS创建新指令 - 基本功能

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init  ...

  3. 最长递增子序列hdu1087

    #include<map> #include<set> #include<list> #include<cmath> #include<queue ...

  4. 最大流算法之EK（最短路径增广算法）

    这是网络流最基础的部分--求出源点到汇点的最大流(Max-Flow). 最大流的算法有比较多,本次介绍的是其中复杂度较高,但是比较好写的EK算法.(不涉及分层,纯粹靠BFS找汇点及回溯找最小流量得到最 ...

  5. ST-2

    1.第一个程序没有覆盖到下表为0的数.第二个程序找到的是x中第一个等于0的数的下标. 2.对于第一个程序:x = [2,3,5], y = 3 对于第二个程序:X = [2,0,6] 3.对于两个程序 ...

  6. Django models Fild详解

    本文参考自:django官方文档models/field 在model中添加字段的格式一般为:  field_name = field_type(**field_options) 一  field o ...

  7. C#集合之并发集合

    .NET 4 开始,在System.Collection.Concurrent中提供了几个线程安全的集合类.线程安全的集合可防止多个线程以相互冲突的方式访问集合. 为了对集合进行线程安全的访问,定义了 ...

  8. [刷题]算法竞赛入门经典 3-7/UVa1368 3-8/UVa202 3-9/UVa10340

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 都是<算法竞赛入门经典(第二版)>的题目,标题上没写(第二版) 题目:算法竞赛入门经典 3-7/UVa13 ...

  9. Python lambda 表达式有何用处，如何使用？

    在看Python教程的时候,被 lambda 的解释给难住了,之前没有这么用过. 在<简明Python教程>上的解释: [摘录如下:] lambda语句被用来创建新的函数对象,并且在运行时 ...

  10. 如何优雅地运用 Chrome (Google)

    已经在很多工具类文章前言中,提及使用工具的重要性:以至于在写这篇时候,大为窘迫:穷尽了脑海中那些名句箴言,目测都已然在先前文章中被引用.鉴于杳让人心底意识到工具的重要性,并且能践行之,远比介绍如何使用 ...