元のJavaScriptのwindow.onloadグローバルローディングモジュールで定義された関数では実行できない問題があります.

一つはwindow.onloadの中で関数を定義して、それからhtmlの中で関数を呼び出す時にエラーが発生します.具体的には次のとおりです

    
    
    
    


        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("    ！");
                }
            }
    
        }
    


           ：
          
            ：

実行後に次のエラーが発生しました.私が呼ぼうとしているbianhuan関数が定義されていません.まず私たちはウェブページのコードがブラウザで解析された後の運行の順序を理解しなければなりません.彼らの運行の順序は一つの文に出会って一つの文を解析します.しかし、ユーザーの立場から見れば、私達のホームページはもちろん、先にページの視聴覚レイヤーを表示したいです.
その友好性を高めて、中の各種の機能を試みることを実現します.だから、私たちの前の人たちは、これまでの文を全部解析してから、js文を解析すればいいのではないかと思っています.window.onloadのようなものがあります.
などの関数が現れたら、目的はブラウザでHTML文を解析してからjs文を解析することです.
だから私はこの問題を解決するために、window.onload文を使って、このように私の上の例をとって、確かにHTMLの視認層をレンダリングしました.道理のブラウザーによって後で私のjs文を解析して、そして私の欲しい機能を成功的に完成しました.しかし、関数が定義されていないエラーを報告しました.私は愚かにも他の基本的な論理文が間違っていると思いました.だから、長い間検査しました.最後にやはり上記の先輩二人のブログによって答えが出ました.
問題は簡単です.window.onloadの考えはhtml文を解析してからjs文を実行したいです.しかし、ブラウザがこの文を解析すると、ブラウザはjsにジャンプしてこの関数を探しますが、見つけられません.はい、見つけられませんでした.
window.onloadはHTML文を全部解析して実行しますので、Windows.onloadという機能領域からこの関数を使うことができません.だから、ブラウザはもちろんこのヒントをくれます.
解決方法は簡単です.あなたが定義した呼びたい関数をwindow.onloadというスコープから取り出して、グローバルスコープに入れます.そうです.次のように、window.onloadの中の内容を外に出します.

    
    
    
    


       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("    ！");
            }
        }




           ：
      
            ：

この時あなたは発見することができて、bugは解決しましたか?NO,You are too young too simple!これはもう一つの問題が発生します.Canot read property「value」of null(大体の意味では、この値が見つけられないということです.この値は存在しません.)ははは、実は上のように、実行の順番によって引き起こされます.あなたが呼び出したい関数のスコープを変更して、この関数をグローバル作用領域に存在させます.しかし、もう一つの問題があります.jsがグローバルスコープに存在する場合、ブラウザは順に一つのバーで実行します.Ow_まで実行します.after.value=(Owube fore.value).toUpperCase()この文はHTML文がまだ解析されていませんので、ブラウザでは当然この値が見つけられません.ですから、エラーが発生します.
この時あなたは感じているのではないでしょうか?私達の呼びたい関数を定義して、また全体的な作用域の中では通じないです.window.onloadという局部作用領域を定義しても通じないです.どうやって解決しますか?諦めたほうがいいです.もう寝ます.ハハハ.
実は最終的な解決方法は簡単です.jsコードをグローバルスコープに入れて、HTML本体のbodyの後に全部入れて、問題は解決します.
このようにすれば、HTML文の解析を完全にすることができます.私たちはHTMLに入力した値を入手できます.jsここに実行した時、HTMLの中の値ブラウザが解析されましたので、jsはHTMLの中の値をすでに手に入れました.このようにCanot read property'value'of nullという問題を解決しました.
2.ブラウザがこの文を解析すると、ブラウザはjsにジャンプしてこの関数を探します.今回は関数はwindow.onloadで定義されているのではなく、グローバルスコープで定義されているので、関数が定義されていない問題を解決しました.

    
    
    
    




           ：
      
            ：


        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("  ！");
             }
         }
 
 

コア問題はコードのロードの実行順序の問題です.