Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > Javascript window.onload内的函数无法调用

Javascript window.onload内的函数无法调用

浏览: 作者:Datehoer 发布日期:2020-12-11 20:27:13 来源: 原创
其实这也是今天上课看到的,不过其实我知道是什么问题。不过这个貌似许多初学者都不会,所以准备跟大家学习一下。
众所周知,JavaScript与html代码在同一页的时候,可能会因为JavaScript代码太多加载太慢导致网页打开速度缓慢,所以就有把内容放在window.onload里使得html加载完之后再加载JavaScript代码。
但是今天上午调试的时候,发现出现了一个错误。
console面板的提示是函数找不到,这是为什么呢?
因为把想调用的函数放在了window.onload里,所以这个函数就会在最后才会加载。
而这就是问题所在了。

Uncaught ReferenceError: aaaa is not defined at HTMLInputElement.onclick
报错就是这个,而我的代码呢?
<body>
<div>
<input type="text">
<input type="button" value="获取内容" onclick="aaaa()">
</div>
<script>
window
.onload = function () {
var a = document.getElementsByTagName("input")[0];
function aaaa() {
alert(a.value);
}
}
</script>
</body
>
就是一个简单的获取文本框内输入的内容。
简单解释一下,这是因为window.onload会使匿名函数里面的内容在页面加载之后才会加载,而我们在页面加载到input:button的时候,里面有一个onclick,所以网页会停下继续加载而去寻找aaaa()这个函数,而我们的这个函数要在网页全部加载完才会加载,所以就找不到这个函数了,而你到最后才加载了window.onload内的内容也是没有用的了。
而解决这个问题的答案很简单,把需要调用的内容拿出来即可,不过这其实也是推荐使用js文件的原因,不过其实如果把script的代码放在</body>上面,html代码的最后面的话,其实没比较加window.onload这个了。不过假如说你使用文件导入的方法,其实也是推荐放在html代码的最后面的。
问题简简单单的解决了,有没有收获呢?
如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行回复的。
其实之所以这么短是因为今天突然想整个毛概的题库出来做做,所以文章简短,哈哈,最近几篇应该都差不多的。

版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/86.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!