前几天做一个点击按钮，就实现切换图片效果的小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. java复习(5)---接口、继承、多态

    Java作为完全面向对象语言,接口.继承和多态是三个非常重要的概念. 1.继承. (1)关键字: extends (2)子类用super()调用父类构造函数,用super().方法 调用父类的成员方法 ...

  2. Elasticsearch - 快速入门

    Elasticsearch是基于Apache 2.0开源的实时.分布式.分析搜索引擎,相比Lucene,Elasticsearch的上手比较容易,这篇文章主要纪录Elasticsearch的基本概念和 ...

  3. 图解WebGL&Three.js工作原理

    “哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...

  4. JSON 解析工具的封装(Java)

    JSON 解析工具的封装(Java) 一直想有一个属于自己的JSON工具,今天终于弄好了..... 1.添加pom依赖包 <!--json解析--> <dependency> ...

  5. Java中四种遍历List的方法

    package com.ietree.basic.collection.loop; import java.util.ArrayList; import java.util.Iterator; imp ...

  6. 在Angular项目下使用Umeditor

    Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本. 公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合.但是目前官方只提供Jsp ...

  7. 蓝桥杯-立方尾不变-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  8. AspNetCore-MVC实战系列（四）之结尾

    AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...

  9. poj3304计算几何直线与线段关系

    Given n segments in the two dimensional space, write a program, which determines if there exists a l ...

  10. pygame开发滑雪者游戏

    pygame开发滑雪者游戏 一.实验说明 下述介绍为实验楼默认环境,如果您使用的是定制环境,请修改成您自己的环境介绍. 1. 环境登录 无需密码自动登录,系统用户名 shiyanlou,该用户具备 s ...