addEventListener could not get Var of Class in Javascript

Question

I am facing a problem. When I try to call value of variable of the class. Would everyone mind help me? the following is my issue:

I wrote an event for a Node, and call var that I have defined before

class Testing{
        constructor(name){
            this._name = name;
        }
        show(){
            var node;
            node = document.getElementById('offer_sections_box');
            node.addEventListener('click',function(){
                console.log(this._name);
                console.log('hihi');
            })
        }
    }
    a = new Testing('Nguyen Thanh Vuong');
    a.show();

Unfortunately, I could not get the value of Name, the result return undefined. undefined

Would someone mind explain to me the reason, and give me some advice to handling this problem. Thank you so much

Does this answer your question? [javascript: how adding event handler inside a class with a class-method as the callback?](https://stackoverflow.com/questions/43727516/javascript-how-adding-event-handler-inside-a-class-with-a-class-method-as-the-c) — user120242, Jul 14 '20 at 23:22
The `this` inside the event listener is the DOM element that fired the event. Use an arrow function which doesn't have `this` and uses its surrounding `this` like so: `node.addEventListener('click', () => { ... };` — ibrahim mahrir, Jul 14 '20 at 23:22
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Ivar, Jul 14 '20 at 23:23

score 2 · Answer 1 · edited Jul 15 '20 at 00:06

The problem here is with "this" inside the event listener. The "this" inside the listener is not the class instance, but rather the event on which you clicked, which would be element "offer_sections_box". You can change the callback function to an arrow function, and your "this" would be a (the class instance).

I added another console.log, which will show you the difference in the "this".

class Testing{
    constructor(name){
        this._name = name;
    }
    show(){
        var node;
        node = document.getElementById('offer_sections_box');
        node.addEventListener('click',function(){
            console.log(this);
            console.log(this._name);
            console.log('hihi');
        })
    }
}
a = new Testing('Nguyen Thanh Vuong');
a.show();

vs this:

class Testing{
    constructor(name){
        this._name = name;
    }
    show(){
        var node;
        node = document.getElementById('offer_sections_box');
        node.addEventListener('click',()=>{
            console.log(this);
            console.log(this._name);
            console.log('hihi');
        })
    }
}
a = new Testing('Nguyen Thanh Vuong');
a.show();

using bind:

class Testing{
    constructor(name){
        this._name = name;
    }
    show(){
        var node;
        node = document.getElementById('offer_sections_box');
        node.addEventListener('click',function(){
                console.log(this);
            console.log(this._name);
            console.log('hihi');
        }.bind(this))
    }
}
a = new Testing('Nguyen Thanh Vuong');
a.show();

could you show how to use .bind instead of the es6 notation? — DCR, Jul 14 '20 at 23:44
@nick: thank you very much. everything worked well after i had added `.bind(this)` — Nguyễn Thanh Vương, Jul 18 '20 at 19:50
Happy to help. "This" takes a while to understand, but once you get it, you get it. If you're having "this" issues, I advise adding as many logs as possible at every step. Can you please mark my answer as the correct response? :) — St.Nicholas, Jul 18 '20 at 20:42

addEventListener could not get Var of Class in Javascript

1 Answers1