js笔记（4）--关于在load（）⾥⾯定义函数，调⽤函数⽆法执⾏~
由于本⼈学习js学不久，所以，今天刚好遇到了⼀个关于在load⾥⾯定义函数，然后在html⾥⾯调⽤函数时出现错误。具体见下⾯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
html个人网页完整代码顺序<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) {
case 'covert_upper':
Ow_after.value = (Ow_before.value).toUpperCase();inner join和left join的性能
console.log("⼤写转换成功！")
break;
case 'covert_lower':
Ow_after.value = (Ow_before.value).toLowerCase();
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函数未定义！
于是我百度了⼀下，看到博客园的其他前辈提供的内容，附上地址：wwwblogs/magicgua/p/4363903.html#commentform；wwwblogs/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 charset="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) {
case 'covert_upper':
Ow_after.value = (Ow_before.value).toUpperCase();
console.log("⼤写转换成功！")
break;
case 'covert_lower':
Ow_after.value = (Ow_before.value).toLowerCase();
default:securltyrlsk什么意思
console.log("转换失败！");
}
}
</script>
<body>
请输⼊英⽂字母：<input id="w_before" type="text"></br>
免费开发php的工具<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).toUpperCase()；这条语句时，由于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 charset="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) {
stack onswitch (the_option) {
truffle框架case 'covert_upper':
Ow_after.value = (Ow_before.value).toUpperCase();
console.log("⼤写转换成功！")
break;
case 'covert_lower':
Ow_after.value = (Ow_before.value).toLowerCase();
console.log("⼩写也成功！");
break;
default:
console.log("失败！");
}
}
</script>
</html>
第⼀次写这么长的⽂章，希望我的笔记可以帮助到⼀部分⼈，⼀起加油。——————来⾃胡66。

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