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

由于本人学习js学不久,所以,今天刚好遇到了一个关于在window.onload里面定义函数,然后在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‘)">&nbsp;&nbsp;
<input type="button" id="cover_lower" value="转小写" onclick="bianhuan(‘covert_lower‘)"></br> 转换后的英文字母:<input type="text" id="w_after"> </body> </html>

运行后出现下面错误:显示我要调用的bianhuan函数未定义!

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

 

 

 于是我百度了一下,看到博客园的其他前辈提供的内容,附上地址:https://www.cnblogs.com/magicgua/p/4363903.html#commentform;https://www.cnblogs.com/zxxsteven/p/9329885.html。

所以我整理了一下思路:

 

首先我们得明白网页代码在浏览器中被解析后的运行顺序,他们的运行顺序都是遇到一条语句解析一条语句。然而从用户角度出发,我们的网页固然是想先显示出页面的视图层,

增加其友好性,再实现试图里面的各种功能。所以我们的前人们想,要是我们可以等html语句全部解析完全,然后再解析js语句,这样子不就好了吗?于是就有了类似window.onload

等函数的出现,目的就为了,等待浏览器解析完HTML语句,再来解析js语句。

 

所以我就是为了解决这个问题,于是用了window.onload语句,这样拿我上面的那个例子来说,的确把HTML的视图层渲染出来了,按道理浏览器接下来就会解析我的js语句,然后成功完成我想要的功能~  但是却报了一个函数未定义的错误!我傻傻的以为我是其他基本逻辑语句写错了,所以检查了好久,最后还是根据上面我提到的两位前辈的博客,才得出了答案。

 

问题其实很简单:虽然使用window.onload的想法是想要使html语句解析完,再执行js语句。但事与愿违,当浏览器解析到 <input type="button" id="cover_upper" value="转大写" onclick="bianhuan(‘covert_upper‘)">这条语句时,浏览器就会跳到js里去寻找这个函数,但是,它找不到!!!没错,找不到……

 

因为window.onload会在HTML语句全部解析完全再执行里面的语句,所以暂时无法从window.onload这个作用域里面使用这个函数,所以浏览器当然给我们这个提示(函数未定义!)。

 

解决方法很简单,把你自己定义的想要调用的函数从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‘)">&nbsp;&nbsp;<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笔记(4)--关于在window.onload()里面定义函数,调用函数无法执行~

 

 

 

其实道理和上面的一样,执行的顺序导致的,你虽然把你要调用的函数的作用域改了,让这个函数存在于全局作用域。但是会出现另一个问题:就是当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‘)">&nbsp;&nbsp;<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>

 

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

 

 

第一次写这么长的文章,希望我的笔记可以帮助到一部分人,一起加油。——————来自胡66。

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

上一篇:vscode 创建C# cosole


下一篇:APP测试--monkey的使用