前几天做一个点击按钮，就实现切换图片效果的小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. 第五章 HQL实用技术

    第五章   HQL实用技术5.1  使用HQL查询语句(面向对象查询语句)    5.1.1 编写HQL语句        5.1.1.1 from子句                    例:fr ...

  2. js 不要使用new

    (1)不要使用new Array(),new Number, new String, or new Boolean. 等等 如果要新建数组,没有必要使用new Array(),使用[];原因是直观. ...

  3. lua 条件控制

    lua 条件控制 if 语句 结构 if (condition) then statements end 示例程序 local a = 10 if (a > 1) then print(&quo ...

  4. 使用Three.js的材质

    1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度 ...

  5. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  6. 【转载】GPIO模拟i2c通信

    I2C总线的通信过程(见图4-8)主要包含三个主要阶段:起始阶段.数据传输阶段和终止阶段. 1. 起始阶段 在I2C总线不工作的情况下,SDA(数据线)和SCL(时钟线)上的信号均为高电平.如果此时主 ...

  7. IDEA第五章----Git常用技能

    前几篇已经介绍了idea的环境搭建及基础配置常用模板等,这一章我们介绍下idea中git的一些常用技能,包括提交文件,排除提交文件,合并分支,解决冲突,还原代码等等等. 第一节:Git常用技能 Git ...

  8. 【代码学习】PHP中GD库的使用

    PHP--GD库 ================================================ 一.支持: 需要php支持GD库 二.作用: 验证码.水印.缩放等 三.绘画步骤: ...

  9. SCP“免密” 远程COPY较多文件

    一.linux脚本实现自动输入密码 使用Linux的程序员对输入密码这个举动一定不陌生,在Linux下对用户有严格的权限限制,干很多事情越过了权限就得输入密码,比如使用超级用户执行命令,又比如ftp. ...

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

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