ES6 Classes - Calling methods from a click event

barrylachapelle picture barrylachapelle · Mar 22, 2018 · Viewed 16.1k times · Source

I am new to ECMA classes.

In the following code, I have built a button class that is working fine. Now I am trying to call the prev_image() method from inside the click eventlistener. I know 'this' refers to the button instance but am not sure how to call a method from the Gallery class. Thanks for any help.

class Gallery{

    constructor(){
    }

    draw(){

        //build button
        prevbtn.draw();

        //button listener
        document.getElementById('prevbtn').addEventListener('click', function(){
            this.prev_image();   <--- this errors out
            console.log('pressed'); <--this works
        });

    }

    prev_image(){
        console.log('previous image!');
    }

}

Answer

Saikat Hajra picture Saikat Hajra · Mar 22, 2018
document.getElementById('prevbtn').addEventListener('click', ()=>{
            this.prev_image();   
            console.log('pressed');
        });

Use the arrow function here.Arrow function does not have its own this it uses this from the code that contains the Arrow Function