Accessing class method inside eventListener function Javascript

Question

I have a Class names dialog. Inside this class I have a method hide() to hide the dialog box itself and its modal box. But I can't access hide function from "onclick" function. How can I access it?

class Dialog{
    constructor(id){
        this._dialogBox = $('.dialog#'+this.id);
        this._closeButton = this._dialogBox.find('span.closedialog');

        this._closeButton.on('click', function(){
            //how to access hide() function from here?
        });

    }
    hide(){
        this._dialogBack.hide();
        this.dialogBox.hide();
    }
}

Unrelated to the question I could not help to notice that it's probably a good idea for span.closedialog to be changed to button.closedialog (In HTML). This improves HTML semantics and brings significant benefits to usability and accessibility. Try to focus SPAN using only a keyboard TAB key... All this comes for free if using the proper semantics — Hrvoje Golcic
– Hrvoje Golcic, Commented Jul 20, 2020 at 14:00

Merijndk · Accepted Answer · 2020-07-20 13:55:06Z

2

Javascripts this context changes inside event listeners. You can work around this by adding the this context to a seperate variable:

class Dialog{
    constructor(id){
        this._dialogBox = $('.dialog#'+this.id);
        this._closeButton = this._dialogBox.find('span.closedialog');

        const self = this;

        this._closeButton.on('click', function(){
            //how to access hide() function from here?
            self.hide()
        });

    }
    hide(){
        this._dialogBack.hide();
        this.dialogBox.hide();
    }
}

As you can see I assign the this context to the variable self. After that you can access the class context with self.

answered Jul 20, 2020 at 13:55

Merijndk

1,6934 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krzysztof Kaczyński · Accepted Answer · 2020-07-20 13:55:53Z

1

I think this should work for you

this._closeButton.on('click', this.hide.bind(this));

Context of this is different in event listener so you should bind your actual this to eventListener context

answered Jul 20, 2020 at 13:55

Krzysztof Kaczyński

5,1516 gold badges35 silver badges62 bronze badges

Comments

henok · Accepted Answer · 2020-07-20 13:58:05Z

0

Change the onclick function's listener to arrow function if you are using es6+.. arrow functions don't override this

class Dialog{
    constructor(id){
        this._dialogBox = $('.dialog#'+this.id);
        this._closeButton = this._dialogBox.find('span.closedialog');

        this._closeButton.on('click', () => {
           this.hide();
        });

    }
    hide(){
        this._dialogBack.hide();
        this.dialogBox.hide();
    }
}````

answered Jul 20, 2020 at 13:58

henok

8945 silver badges13 bronze badges

Collectives™ on Stack Overflow

Accessing class method inside eventListener function Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related