前几天做一个点击按钮，就实现切换图片效果的小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中的复制函数REPLICATE

    REPLICATE函数: REPLICATE(字符串,次数)复制一个字符串n次 ) --输出结果:0000000000

  2. AspNetPager 分页的详细用法（ASP.NET）

    1.[添加AspNetPager.dll文件] 2.[使用方法] public static DataTable GetRecord(SystemModel.Pager mt, ref int Tot ...

  3. C++ struct 初始化的问题

    struct student { int age; string name; int id; }; 初始化: student st1={10, "li ming", 01}; 修改 ...

  4. jQuery插件制作

    模板:(function($){ $.fn.plugins=function(options){ var defaults = { } var options = $.extend(defaults, ...

  5. java进制转换（无视正负数的差别）

    最近看了一下学习资料,感觉进制转换其实还是挺有意思的,尤其是对于负数这一方面. 下面和大家分享一下,这里只写了十进制到二进制的转换,其实都是同样的道理 public class Test1 { pub ...

  6. Java中多线程同步类 CountDownLatch

    在多线程开发中,常常遇到希望一组线程完成之后在执行之后的操作,java提供了一个多线程同步辅助类,可以完成此类需求: 类中常见的方法: 其中构造方法:CountDownLatch(int count) ...

  7. 移动端 H5图片裁剪插件，内置简单手势操作

    前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...

  8. 蓝桥杯-格子中输出-java

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

  9. 关于input标签无法对齐的解决方法！

    在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...

  10. LeetCode4. Median of Two Sorted Arrays---vector实现O(log(m+n)--- findkth

    这道题目和PAT上的1029是同一题.但是PAT1029用O(m+n)的时间复杂度(题解)就可以,这道题要求是O(log(m+n)). 这道题花费了我一个工作日的时间来思考.因为是log因而一直思考如 ...