ES6 Classes - Calling methods from a click event

Question

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!');
    }

}

use arrow function `()=>` this bind the parent scope to child — Saikat Hajra, Mar 22 '18 at 07:27

Saikat Hajra · Accepted Answer · 2018-03-22T08:16:28.280

14

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

edited Mar 22 '18 at 08:16

answered Mar 22 '18 at 07:30

Saikat Hajra

670
3
12

Every function does lexical scoping. I guess you don't mean variable "scope"? – Bergi Mar 22 '18 at 08:05
exactly not the variable scope. I would rather add few more lines to explain :) @Bergi – Saikat Hajra Mar 22 '18 at 08:11
So please [edit] your answer and don't use the term "scope". – Bergi Mar 22 '18 at 08:13

score 3 · Answer 2 · answered Mar 22 '18 at 07:35

Try it by binding the context using .bind(this)

class Gallery {

  constructor() {}

  draw() {

    //build button
    //prevbtn.draw();

    //button listener
    document.getElementById('prevbtn').addEventListener('click', function() {
      this.prev_image();
      console.log('pressed');
    }.bind(this));

  }
  // prevbtn.draw(){
  //console.log('prev btn')
  //}

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

}

var x = new Gallery();
x.draw();

<button id='prevbtn'>Click</button>

score 0 · Answer 3 · answered Mar 22 '18 at 07:27

0

With a function that way, you need to bind this. However, change the function to an arrow function:

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

And it should work. You no longer need to bind this, and it's also a lot cleaner.

answered Mar 22 '18 at 07:27

cbll

6,499
26
74
117

ES6 Classes - Calling methods from a click event

3 Answers3