外部jsファイルからのクリック機能の呼び出し

Question

私はonClickという機能を外部ファイルnavigation.jsにあります。これはページの下部にあります。

(function() { 

    function openNav() { 
      document.getElementById("mySidenav").style.width = "250px"; 
    } 

    function closeNav() { 
      document.getElementById("mySidenav").style.width = "0"; 
    } 

    var open = document.getElementById("openNav"); 
    var close = document.getElementById("closeNav"); 

    open.addEventListener("click", openNav, false); 
    close.addEventListener("click", closeNav, false); 

})(); 

そして、これは、クリックイベントがoccureすべきワードプレスのページの一部である：これはnavigation.jsある画面のサイズが変更され、実際にハンバーガーメニューです

<div id="mySidenav" class="sidenav"> 
     <a href="javascript:void(0)" class="closebtn" id="closeNav">&times;</a> 
       <?php 
        wp_nav_menu(array(
         'theme_location' => 'menu-2', 
         'menu_id'  => 'primary-menu-bottom', 
         'walker'   => new My_Walker(), 
        )); 
       ?> 
</div> 
<span class="open-menu" style="font-size:30px;cursor:pointer" id="openNav">&#9776; open</span> 

を、。問題は機能が機能していないことです。外部jsファイルからonClickイベントを呼び出すことはできますか、イベントを発生させるべき同じページに配置する必要がありますか？

Answer 1

問題はおそらく、スクリプトをロードする方法に間違いがないように見えます。コードの実行時に、必要なすべてのDOM要素が既にブラウザによってレンダリングされていることを確認する必要があります。 （https://jsfiddle.net/sLLLtb3x/ ：

window.onload = function() { 

    function openNav() { 
      document.getElementById("mySidenav").style.width = "250px"; 
    } 

    function closeNav() { 
      document.getElementById("mySidenav").style.width = "0"; 
    } 

    var open = document.getElementById("openNav"); 
    var close = document.getElementById("closeNav"); 

    open.addEventListener("click", openNav, false); 
    close.addEventListener("click", closeNav, false); 

}; 

はあなたがここにアクションで、このコードの一部を見ることができます：

あなたはwindow.onloadハンドラを使用することができます（または、同等の.addEventListener()をだ）ページが完全にロードされた後に初期化スクリプトを呼び出すためにJavaScriptコードの読み込み方法を変更したことに注意してください。ラップインヘッドに設定され、コードの読み込み動作をシミュレートします）。

「外部スクリプト」の機能を使用しての問題については

---

- 一般的に、はい、あなたはそれを行うことができますが、あなたのケースでは、あなたの関数はからあなたの機能を妨げるすぐに呼び出さ機能発現、に包まれていますグローバルスコープに漏れる手動でグローバル変数に割り当てることも、IIFEを削除することもできます（ただし、onloadの動作が必要なことに注意してください）。

しかし、私がすでに言ったように、あなたのコード例は、コードピース自体の内部にイベントハンドラを割り当てているので、問題ありません（これはまったく問題ありません）。