Calling functions in ES6

Question

Trying to call the closeOpenNavDropdowns function within my toggleDropdownNavState function, but nothing is running and I am not getting errors. I've checked the compiled code and it's there.

EDIT: trying to call the fn like this.closeOpenNavDropdowns(); gives me Uncaught TypeError: this.closeOpenNavDropdowns is not a function

const aboutDropdownNav = {
    setup() {
        $('.nav__main__about-dropdown--js').click(this.toggleDropdownNavState);

        // Handlers for when user clicks outside the dropdown to close
        $(document).click(function(event) {
            if ($('body').hasClass('about-dropdown--open') && !$(event.target).parents('.about-us-dropdown').length) {
                $('body').removeClass('about-dropdown--open');
            }
        })
    },
    toggleDropdownNavState(e) {
        e.stopPropagation();
        e.preventDefault();
        $('body').toggleClass('about-dropdown--open');
        this.closeOpenNavDropdowns;
    },
    closeOpenNavDropdowns() {
        console.log('closeOpenNavDropdowns in aboutDropdown.js');            
        $('body').removeClass('solutions-dropdown--open'); //close solution dropdown if its open
    }
}

module.exports = aboutDropdownNav;

and the above code is called by this other file:

var aboutDropdownNav = require('./nav-about-dropdown');

module.exports = function() {
    // About Dropdown Nav
    aboutDropdownNav.setup();
}

user7637745 · Answer 1 · 2018-06-12T21:24:49.190

0

The context, when calling this.toggleDropdownNavState is wrong, bind it to the proper context.

$('.nav__main__about-dropdown--js').click(this.toggleDropdownNavState.bind(this));

And you are missing the brackets () to call the function, you just referencing the function.

toggleDropdownNavState(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').toggleClass('about-dropdown--open');
    this.closeOpenNavDropdowns();
},

edited Jun 12 '18 at 21:24

answered Jun 12 '18 at 21:11

user7637745

965
2
14
27

When i try it this way i get `Uncaught TypeError: this.closeOpenNavDropdowns is not a function` – Andrew Jun 12 '18 at 21:13

Guillaume Georges · Accepted Answer · 2018-06-12T21:25:03.677

The toggleDropdownNavState function is attached to an eventListener. Inside an event handler function, this is a reference to the event's current target. That's why closeOpenNavDropdowns is not a function in the object referenced by this.

There are many ways to solve that issue. One of them is to use Function.prototype.bind to force the binding between the closeOpenNavDropdowns function and your object.

const aboutDropdownNav = {

setup: function() {
    
    $('.nav__main__about-dropdown--js').click(this.toggleDropdownNavState.bind(this));

    // Handlers for when user clicks outside the dropdown to close
    $(document).click(function(event) {
        if ($('body').hasClass('about-dropdown--open') && !$(event.target).parents('.about-us-dropdown').length) {
            $('body').removeClass('about-dropdown--open');
        }
    })
},
toggleDropdownNavState : function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').toggleClass('about-dropdown--open');
    this.closeOpenNavDropdowns();
},
closeOpenNavDropdowns : function() {
    console.log('closeOpenNavDropdowns in aboutDropdown.js');

    $('body').removeClass('solutions-dropdown--open'); //close solution dropdown if its open
}

}

aboutDropdownNav.setup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="nav__main__about-dropdown--js" value="Click"/>

Oh wow. I even tried adding `.bind(this)` to my `this.closeOpenNavDropdowns()` call but didn't work. Thanks for the help this fixed my problem! — Andrew, Jun 12 '18 at 21:27

Calling functions in ES6

2 Answers2