Triggering a class method in an eventhandler

Question

class Controller {

    constructor(names){
        this.names = names;
    }

    sayhello(name){
        console.log("Hello " + name);
    }

    makeLink() {
        this.names.forEach(function(name){
            var link = document.createElement('li');
            link.innerHTML = name;
            var container = document.getElementById('container');
            container.appendChild(link);
            link.addEventListener('click', (event) => {
                sayhello(event.target.innerText);
            });
        });
    }
}

Here is an example of what I am trying to do in my actual code. I want to trigger the class method 'sayhello' when the 'li' is clicked, so that that it prints out the name corresponding to the 'li'. However, it doesn't seem to be working. I tried searching for a solution but still haven't had any luck finding it. Does anyone know how I might make this work?

You should have a look at [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/218196) — Felix Kling, Jul 02 '18 at 21:32

score 2 · Answer 1 · answered Jul 02 '18 at 21:34

2

sayhello does not exist in makeLinks' scope, but in its context ( aka this), so you have to take care to not loose context through that forEach function, then you can easily access it:

makeLink() {
    this.names.forEach((name) => { // <----
        var link = document.createElement('li');
        link.innerHTML = name;
        var container = document.getElementById('container');
        container.appendChild(link);
        link.addEventListener('click', (event) => {
            this.sayhello(event.target.innerText); // <----
        });
    });
}

answered Jul 02 '18 at 21:34

Jonas Wilms

132,000
20
149
151

Thank you so much! It worked. I'm pretty new to this, but what is the main difference between calling it as '()=>{ }' and 'function(){ }' in general. – christine Jul 02 '18 at 21:41
@christine glad to help :) – Jonas Wilms Jul 02 '18 at 21:42
2

@christine: Have a look at https://stackoverflow.com/q/20279484/218196 and https://stackoverflow.com/q/34361379/218196 – Felix Kling Jul 02 '18 at 21:45

Triggering a class method in an eventhandler

1 Answers1