Calling click function from external js file

Question

I have a onClick function in external file navigation.js, which is included at the bottom of page. This is 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);

} )();

And this is part of wordpress page where click event should 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>

That is actually hamburger menu, when screen is resized. Problem is that function is not working. Can I call onClick events from external js files, or I must put it at the same page where event should occure ?

You can use external scripts but they should be called at the end of the page - before <body> - so they can pick up the html they need. — Andy
– Andy, Commented Aug 12, 2017 at 17:35
What are the values of open and close? If they're undefined you may need to wait for the DOMContentLoaded event or there's something else amiss. — Phix
– Phix, Commented Aug 12, 2017 at 17:40

mdziekon · Accepted Answer · 2017-08-12 17:52:44Z

The problem probably lies in how you load your script, as there seem to be nothing wrong with it. You have to ensure that when the code is run, all of the required DOM elements are already rendered by the browser.

You can use window.onload handler (or it's .addEventListener() equivalent) to call your initialization script after the page has been fully loaded:

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

};

You can see this code piece in action here: https://jsfiddle.net/sLLLtb3x/ (Please note that I've switched how JavaScript code is loaded - it's set to no wrap - in head to simulate described behavior of code loading).

As for the question of using functions in "external scripts" - in general, yes, you can do that, but in your case, your functions are wrapped in Immediately Invoked Functional Expression, which prevents your functions from leaking to the global scope. You can either manually assign them to some global variable, or you could remove the IIFE (keep in mind that you still need the onload behavior).

But as I've said already, your code example is fine, as you are assigning the event handler within the code piece itself (which is totally fine).

Collectives™ on Stack Overflow

Calling click function from external js file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related