从外部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文件调用点击功能

回答

相关问题