ES6 Classes - Calling methods from a click event
20,463
Solution 1
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
Solution 2
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>
Comments
-
barrylachapelle almost 2 years
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!'); } }
-
Bergi about 6 yearsEvery function does lexical scoping. I guess you don't mean variable "scope"?
-
Saikat Hajra about 6 yearsexactly not the variable scope. I would rather add few more lines to explain :) @Bergi
-
Bergi about 6 yearsSo please edit your answer and don't use the term "scope".