js笔记(4)--关于在load()里面定义函数,调用函数无法执行~

更新时间:2023-05-25 13:12:13 阅读: 评论:0

js笔记(4)--关于在load()⾥⾯定义函数,调⽤函数⽆法执⾏~
由于本⼈学习js学不久,所以,今天刚好遇到了⼀个关于在load⾥⾯定义函数,然后在html⾥⾯调⽤函数时出现错误。具体见下⾯:
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script >
//绑定两个输⼊框var Ow_before = ElementById('w_before');
var Ow_after = ElementById('w_after');
//定义调⽤函数bianhuan,然后在HTML中⽤button的点击事件onclik调⽤。
function bianhuan(the_option) {
switch (the_option) {
ca 'covert_upper':
Ow_after.value = (Ow_before.value).toUpperCa();
console.log("⼤写转换成功!")
break;
ca 'covert_lower':
Ow_after.value = (Ow_before.value).toLowerCa();
default:
console.log("转换失败!");
}
}
}
</script>
<body>
开张大吉请输⼊英⽂字母:<input id="w_before" type="text"></br>
<input type="button" id="cover_upper" value="转⼤写" onclick="bianhuan('covert_upper')">  
<input type="button" id="cover_lower" value="转⼩写" onclick="bianhuan('covert_lower')"></br>
溯源的意思
转换后的英⽂字母:<input type="text" id="w_after">
</body>
</html>
运⾏后出现下⾯错误:显⽰我要调⽤的bianhuan函数未定义!
于是我百度了⼀下,看到博客园的其他前辈提供的内容,附上地址:/magicgua/p/4363903.html#commentform;/zxxsteven/p/9329885.html。
所以我整理了⼀下思路:
⾸先我们得明⽩⽹页代码在浏览器中被解析后的运⾏顺序,他们的运⾏顺序都是遇到⼀条语句解析⼀条语句。然⽽从⽤户⾓度出发,我们的⽹页固然是想先显⽰出页⾯的视图层,
增加其友好性,再实现试图⾥⾯的各种功能。所以我们的前⼈们想,要是我们可以等html语句全部解析完全,然后再解析js语句,这样⼦不就好了吗?于是就有了类似load
等函数的出现,⽬的就为了,等待浏览器解析完HTML语句,再来解析js语句。
所以我就是为了解决这个问题,于是⽤了load语句,这样拿我上⾯的那个例⼦来说,的确把HTML的视图层渲染出来了,按道理浏览器接下来就会解析我的js语句,然后成功完成我想要的功能~  但是却报了⼀个函数未定义的错误!我傻傻的以为我是其他基本逻辑语句写错了,所以检查了好久,最后还是根据上⾯我提到的两位前辈的博客,才得出了答案。
问题其实很简单:虽然使⽤load的想法是想要使html语句解析完,再执⾏js语句。但事与愿
违,当浏览器解析到 <input type="button" id="cover_upper" value="转⼤写"
onclick="bianhuan('covert_upper')">这条语句时,浏览器就会跳到js⾥去寻找这个函数,但是,它找不到!!!没错,找不到……
因为load会在HTML语句全部解析完全再执⾏⾥⾯的语句,所以暂时⽆法从load这个作⽤域⾥⾯使⽤这个函数,所以浏览器当然给我们这个提⽰(函数未定义!)。
解决⽅法很简单,把你⾃⼰定义的想要调⽤的函数从load这个作⽤域⾥⾯拿出来,放到全局作⽤域中。没错,就是下⾯这样,把load⾥⾯的内容放到外⾯。
<!DOCTYPE html>
<html lang="en">
<head>格的成语
<meta chart="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script >
}
var Ocover_upper = ElementById('cover_upper');
var Ocover_lower = ElementById('cover_lower');
var Ow_before = ElementById('w_before');
var Ow_after = ElementById('w_after');
function bianhuan(the_option) {
switch (the_option) {
ca 'covert_upper':
Ow_after.value = (Ow_before.value).toUpperCa();
console.log("⼤写转换成功!")
息夫人break;
ca 'covert_lower':
做什么小本生意好Ow_after.value = (Ow_before.value).toLowerCa();
default:
console.log("转换失败!");
}
}
</script>
<body>
请输⼊英⽂字母:<input id="w_before" type="text"></br>
<input type="button" id="cover_upper" value="转⼤写" onclick="bianhuan('covert_upper')">  <input type="button"
id="cover_lower" value="转⼩写" onclick="bianhuan('covert_lower')"></br>
转换后的英⽂字母:<input type="text" id="w_after">
</body>
</html>
这时候你会发现,bug解决了?no ,you are too young too simple! 它会冒出另⼀个问题:Cannot read property 'value' of null(⼤概意思呢,就是找不到这个值,这个值不存在),哈哈哈哈
其实道理和上⾯的⼀样,执⾏的顺序导致的,你虽然把你要调⽤的函数的作⽤域改了,让这个函数存在于全局作⽤域。但是会出现另⼀个问题:就是当js存在于全局作⽤域时,浏览器就会按顺序⼀条⼀条执⾏,当执⾏到 Ow_after.value = (Ow_before.value).toUpperCa();这条语句时,由于HTML语句还没解析,浏览器当然找不到这个值啦,所以就会报错(Cannot read property 'value' of null)。此
时你是不是觉得,卧槽,把要调⽤的函数定义再全局作⽤域中⾏不通,定义在load这个局部作⽤域也想不通,那到底怎么解决啊?还不如放弃了,睡觉算了,哈哈哈……
其实最终解决⽅法很简单:把js代码放到全局作⽤域⾥边,然后把整个<script></script>放到HTML的主体body后⾯,问题就解决啦~~~~
因为这样⼀来,1.可以使,HTML语句解析完全,我们在HTML⾥⾯输⼊的值可以拿到,因为执⾏到js这⾥时,HTML⾥⾯的值浏览器已经解析,所以js已经拿到HTML⾥⾯的值了,这样解决了Cannot read property 'value' of null这个问题。
2.当浏览器解析到 <input type="button" id="cover_upper" value="转⼤写" onclick="bianhuan('covert_upper')">这条语句时,浏览器就会跳到js⾥去寻找这个函数,这次由于函数不是在load⾥⾯定义的,⽽是在全局作⽤域⾥⾯定义的,所以解决了函数未定义的问题。附上代码及截图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
请输⼊英⽂字母:<input id="w_before" type="text"></br>
<input type="button" id="cover_upper" value="转⼤写" onclick="bianhuan('covert_upper')">  <input type="button"        id="cover_lower" value="转⼩写" onclick="bianhuan('covert_lower')"></br>
转换后的英⽂字母:<input type="text" id="w_after">
苹果鼠标好用吗</body>
<script >
}
var Ocover_upper = ElementById('cover_upper');
var Ocover_lower = ElementById('cover_lower');
var Ow_before = ElementById('w_before');
var Ow_after = ElementById('w_after');
function bianhuan(the_option) {
switch (the_option) {
ca 'covert_upper':
Ow_after.value = (Ow_before.value).toUpperCa();
console.log("⼤写转换成功!")
算盘加法口诀break;
ca 'covert_lower':
Ow_after.value = (Ow_before.value).toLowerCa();
console.log("⼩写也成功!");
break;
军训小结default:
console.log("失败!");
}
}
</script>
</html>
第⼀次写这么长的⽂章,希望我的笔记可以帮助到⼀部分⼈,⼀起加油。——————来⾃胡66。

本文发布于:2023-05-25 13:12:13,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/771396.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:函数   语句   解析   浏览器   全局   前辈   放到   内容
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图