script中调用自创建函数出错的问题

最新推荐文章于 2023-01-06 14:37:52 发布

尘莯

最新推荐文章于 2023-01-06 14:37:52 发布

阅读量212

点赞数 1

分类专栏： web 文章标签： html css javascript html5 jquery

本文链接：https://blog.csdn.net/zjpexe/article/details/117695718

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

script中调用自创建函数出错的问题

今天在练习前端DOM和事件的时候遇到一个问题：通过点击事件调用自定义的方法时直接跳过开始直接执行了方法体的内容。具体的表现是：我需要做一个开关灯的操作，然而在打开页面后直接将灯打开了，且关闭不了。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关灯泡</title>
</head>
<body>
    <img src="../img/off.gif" id="light">
    <script>
        var light=document.getElementById("light");
        var state=false;
        light.onclick= fun();
        function fun(){
             if (state){
                light.src="../img/off.gif";
                state=false;
            }else{
                light.src="../img/on.gif";
                state=true;
            }
        }
    </script>
</body>
</html>

进入HTML页面后效果如下：

在这里插入图片描述

这显然不是我需要的结果，但idea的控制台和浏览器控制台也没有报错。且这显然是script语句已经执行结束并且页面恢复成静态页面了，于是使用了新的方法：

	light.οnclick= function(){
             if (state){
                light.src="../img/off.gif";
                state=false;
            }else{
                light.src="../img/on.gif";
                state=true;
            }
        }

这个样子使用的时候发现页面又恢复正常：

在这里插入图片描述