從外部js文件調用點擊功能

我在外部文件navigation.js中有一個onClick函數，它包含在頁面底部。這是navigation.js：從外部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); 

})();

這是WordPress的網頁的一部分，其中點擊事件應該occure：

<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事件，還是必須將它放在事件發生的同一頁面？

來源

2017-08-12 Nemus

您可以使用外部腳本，但應在頁面末尾調用它們 - 在之前 - 以便它們可以獲取所需的html。 – Andy

腳本包含在頁面的底部。 – Nemus

「open」和「close」的值是什麼？如果它們未定義，您可能需要等待DOMContentLoaded事件或者有其他不妥之處。 – Phix

問題可能在於如何加載腳本，因爲它似乎沒有任何問題。您必須確保代碼運行時，所有必需的DOM元素都已由瀏覽器呈現。

您可以使用window.onload處理器（或者是.addEventListener()當量）打電話給你的初始化腳本後的頁面已經被完全加載：

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); 

};

你可以看到此代碼的一塊位置：https://jsfiddle.net/sLLLtb3x/ （請注意，我已經切換了JavaScript代碼的加載方式 - 它被設置爲，沒有換頭以模擬所描述的代碼加載行爲）。

至於在「外部腳本」使用功能的問題 - 在一般情況下，是的，你可以做到這一點，但在你的情況，你的功能被包裹在立即調用功能性表達，防止你的函數從泄漏到全球範圍。您可以手動將它們分配給某個全局變量，也可以刪除IIFE（請記住，您仍然需要onload行爲）。

但正如我已經說過的，您的代碼示例沒有問題，因爲您正在將代碼段本身分配給事件處理程序（這非常好）。

來源

2017-08-12 17:42:15 mdziekon

我只是刪除了IIFE，它的工作原理 – Nemus

從外部js文件調用點擊功能

回答

相關問題