Javascript 从外部js文件调用click函数

我在外部文件navigation.js中有一个

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

} )();

这是wordpress页面的一部分，点击事件应该发生在这里：

<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事件吗，或者我必须将它放在事件应该发生的同一页面上

问题可能在于如何加载脚本，因为它似乎没有什么问题。您必须确保在运行代码时，浏览器已呈现所有必需的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);

};

您可以在此处看到这段代码： （请注意，我已经切换了JavaScript代码的加载方式-它被设置为无换行头，以模拟所描述的代码加载行为）

---

至于在“外部脚本”中使用函数的问题，一般来说，是的，您可以这样做，但在您的情况下，您的函数被包装在立即调用的函数表达式中，这可以防止您的函数泄漏到全局范围。您可以手动将它们分配给某个全局变量，也可以删除IIFE（请记住，您仍然需要

onload

行为）

---

但是正如我已经说过的，您的代码示例很好，因为您正在代码段本身中分配事件处理程序（这是完全好的）.

您可以使用外部脚本，但应在页面末尾调用它们，以便它们能够获取所需的html。脚本包含在页面底部。

open

和

close

的值是什么？如果它们未定义，您可能需要等待

DOMContentLoaded

事件，否则会出现其他问题。