[Solved] How to add event listener inside a constructor function of a class, but the handle function call a method inside of the class (es6)? [duplica

Enfnmherdi Asks: How to add event listener inside a constructor function of a class, but the handle function call a method inside of the class (es6)? [duplicate]

My problem:​

I have this es6 class named App, and I want to add event listener to the click event on the .someElement element in the constructor function, and inside of the handle function, I want to call 2 methods from the App class:

Code:
class App {
    constructor() {
        document.querySelector('.someElement').addEventListener('click', function (e) {
            const targetInnerText = e.target.innerText
            this.firstMethod() // The method from the App class
            this.secondMethod(targetInnerText) // The method from the App class
        })
    }

    firstMethod() {
        console.log('You clicked an element')
    }

    secondMethod(text) {
        console.log(`You clicked an element with inner text is ${text}`)
    }
}

But the problem is, you may already see, we have an error when executing the firstMethod and secondMethod, because the this keyword is now set the the element with the .someElement class, its no longer set to the App class.

What I tried:​

I tried to create another method, that add event listener like before. But this method will take a parameter with the name of callback, so i can use this method in the constructor function, and then pass the firstMethod as the callback parameter, like this:

Code:
class App {
    constructor() {
        this.addEventListenerWithCallbacks(this.firstMethod)
    }

    addEventListenerWithCallbacks(callback) {
        document.querySelector('.country').addEventListener('click', function (e) {
            const targetInnerText = e.target.innerText
            callback()
        })
    }

    firstMethod() {
        console.log('You clicked an element')
    }

    secondMethod(text) {
        console.log(`You clicked an element with inner text is ${text}`)
    }
}

But the problem you may already know, that its can only take 1 function, right? And so I thought I would use rest parameters to do this:

Code:
...
addEventListenerWithCallbacks(...callbacks) {
        document.querySelector('.country').addEventListener('click', function (e) {
            const targetInnerText = e.target.innerText
            callbacks.forEach(cb => cb())
        })
    }
...

But I think its not really good to that. And so thats what I want to ask, I want to ask if there is a better way to fix my problem or not, and I also want to the if using rest parameters in this situation is a good option or not. Thank you so much, for reading this question!

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.