因为本人学习js学不久，因此，今天恰好遇到了一个关于在window.onload里面定义函数，而后在html里面调用函数时出现错误。具体见下面：html
<!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 > window.onload = function () { //绑定两个输入框var Ow_before = document.getElementById('w_before'); var Ow_after = document.getElementById('w_after'); //定义调用函数bianhuan,而后在HTML中用button的点击事件onclik调用。 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: 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函数未定义！浏览器
因而我百度了一下，看到博客园的其余前辈提供的内容，附上地址：https://www.cnblogs.com/magicgua/p/4363903.html#commentform；https://www.cnblogs.com/zxxsteven/p/9329885.html。函数
因此我整理了一下思路：学习
首先咱们得明白网页代码在浏览器中被解析后的运行顺序，他们的运行顺序都是遇到一条语句解析一条语句。然而从用户角度出发，咱们的网页当然是想先显示出页面的视图层，ui
增长其友好性，再实现试图里面的各类功能。因此咱们的前人们想，要是咱们能够等html语句所有解析彻底，而后再解析js语句，这样子不就行了吗？因而就有了相似window.onloadspa
等函数的出现，目的就为了，等待浏览器解析完HTML语句，再来解析js语句。3d
因此我就是为了解决这个问题，因而用了window.onload语句，这样拿我上面的那个例子来讲，的确把HTML的视图层渲染出来了，按道理浏览器接下来就会解析个人js语句，而后成功完成我想要的功能~ 可是却报了一个函数未定义的错误！我傻傻的觉得我是其余基本逻辑语句写错了，因此检查了很久，最后仍是根据上面我提到的两位前辈的博客，才得出了答案。code
问题其实很简单：虽然使用window.onload的想法是想要使html语句解析完，再执行js语句。但事与愿违，当浏览器解析到 <input type="button" id="cover_upper" value="转大写" onclick="bianhuan('covert_upper')">这条语句时，浏览器就会跳到js里去寻找这个函数，可是，它找不到！！！没错，找不到……orm
由于window.onload会在HTML语句所有解析彻底再执行里面的语句，因此暂时没法从window.onload这个做用域里面使用这个函数，因此浏览器固然给咱们这个提示（函数未定义！）。htm
解决方法很简单，把你本身定义的想要调用的函数从window.onload这个做用域里面拿出来，放到全局做用域中。没错，就是下面这样，把window.onload里面的内容放到外面。
<!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 > window.onload=function(){ } var Ocover_upper = document.getElementById('cover_upper'); var Ocover_lower = document.getElementById('cover_lower'); var Ow_before = document.getElementById('w_before'); var Ow_after = document.getElementById('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: 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).toUpperCase();这条语句时，因为HTML语句还没解析，浏览器固然找不到这个值啦，因此就会报错（Cannot read property 'value' of null）。
此时你是否是以为，卧槽，把要调用的函数定义再全局做用域中行不通，定义在window.onload这个局部做用域也想不通，那到底怎么解决啊？还不如放弃了，睡觉算了，哈哈哈……
其实最终解决方法很简单：把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里去寻找这个函数，此次因为函数不是在window.onload里面定义的，而是在全局做用域里面定义的，因此解决了函数未定义的问题。附上代码及截图：
<!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 > window.onload=function(){ } var Ocover_upper = document.getElementById('cover_upper'); var Ocover_lower = document.getElementById('cover_lower'); var Ow_before = document.getElementById('w_before'); var Ow_after = document.getElementById('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(); console.log("小写也成功！"); break; default: console.log("失败！"); } } </script> </html>
第一次写这么长的文章，但愿个人笔记能够帮助到一部分人，一块儿加油。——————来自胡66。