前几天做一个点击按钮，就实现切换图片效果的小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. angular ng-bind

    <body ng-app=""> <div ng-controller="firstController"> <input typ ...

  2. 【Tomcat源码学习】-4.连接管理

    前面几节主要针对于Tomcat容器以及内容加载进行了讲解,本节主要针对于连接器-Connector进行细化,作为连接器主要的目的是监听外围网络访问请求,而连接器在启动相关监听进程后,是通过NIO方式进 ...

  3. C#数据结构之串

    串(string)是n(n>=0)个字符组成的有限序列. 由于串中的字符都是连续存储的,在C#中有恒定不变的特性.一经创建就保持不变. 为了区别C#中的string,因此以stringDS类模拟 ...

  4. 除去ubuntu的grub引导

    除去ubuntu的grub引导 step如下>> 进入ubuntu终端 sudo gedit /etc/defauli/grub 将 #GRUB_HIDDEN_TIMEOUT=0 最前面的 ...

  5. NODEJS环境搭建 第一篇 安装和部署NODEJS

    一.下载安装文件 根据自己当前系统环境,下载相对应的安装文件 https://nodejs.org/en/download/ 二.双击安装 都傻瓜式的安装步骤,一步一步安装就好了. 三.检查安装结果 ...

  6. windows的bat脚本

    一个小小的设置固定ip和关闭防火墙的脚本: @echo //-=-=-=-=-=-=-=-=-=-=-=-=-=-=@echo // [固定设置]@echo // 设置IP,子网掩码,网关@echo ...

  7. C语言精要总结-指针系列（一）

    考虑到指针内容繁多,这里将指针作为一个系列,从简入繁,一点一点深挖并掌握这C语言的精华.初步计划如下 此文为指针系列第一篇: C语言精要总结-指针系列(一) 内存与地址 我们可以把内存看做一排连续的房 ...

  8. codeforces 803C Maximal GCD(GCD数学)

    Maximal GCD 题目链接:http://codeforces.com/contest/803/problem/C 题目大意: 给你n,k(1<=n,k<=1e10). 要你输出k个 ...

  9. 极光的开源礼物「Aurora IMUI」

    今日,奉上我们拙作,仅为开源世界献出绵薄之力. Aurora IMUI,一个通用的即时通讯(IM)UI 库.不局限于任何 IM SDK. 本 UI 库提供了消息列表.输入视图等常用组件. 初心 过去的 ...

  10. 使用JavaEE的ServerAuthModule模块和web.xml进行相应配置，实现对用户的权限控制

    ServerAuthModule这里不细说,可以自行百度. 重点在注释: <!-- 声明用于安全约束的角色 --> <security-role> <role-name& ...