JS相关window.onload= function(){}里定义函数无法调用

最新推荐文章于 2022-09-16 17:06:13 发布

BrianJustin*

最新推荐文章于 2022-09-16 17:06:13 发布

阅读量4k

点赞数 11

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Lsiyi_/article/details/123139797

版权

问题：在window.οnlοad= function(){}里定义了一个函数show()，在<body>部分的按钮通过属性οnclick="show()"调用该函数，结果报错。

代码段：

//js部分
<script>
    window.onload= function(){
        function show(){
            console.log("测试一下");
        }
	}
</script>

<body>
    <input type="button" value="显示内容" onclick="show()">
</body>

报错内容：show()函数未定义

报错原因：

浏览器加载是从上至下按顺序加载，而通过onload可以使代码在其他内容加载完毕后再加载。

这里加载到<input type="button" value="显示内容" οnclick="show()">这行代码时，show()函数还未被加载到，即还未定义。

此时无法将show()函数绑定到onclick事件上，所以，当我们点击按钮时，也就不会执行show()函数里的内容。

解决方法：

第一种 直接将show()函数拿到window.οnlοad= function(){}外面。

<script>
    window.onload= function(){
            
	}
    function show(){
        console.log("测试一下");
    }
</script>

第二种 给按钮设置id，在JS部分给按钮绑定事件

//JS部分
<script>
    window.onload= function(){
        var btn=document.getElementById("btn");
        btn.onclick=show;//注意不要加括号，否则会直接调用show()函数
        function show(){
            onsole.log("测试一下");
        }
	}    
</script>

<body>
    <input id="btn" type="button" value="显示内容">
</body>

成功解决：

BrianJustin*

关注

11
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
JS相关window.onload= function(){}里定义函数无法调用

z
复制链接

扫一扫

JS相关window.onload= function(){}里定义函数无法调用

“相关推荐”对你有帮助么？