When I use arrow functions, the context of count is accesible, and it works:
class Counter {
count = 0
constructor({
countElementId,
incrementElementId,
decrementElementId
}){
this.countElement = document.getElementById(countElementId)
this.incrementElement = document.getElementById(incrementElementId)
this.decrementElement = document.getElementById(decrementElementId)
this.incrementElement.addEventListener("click", () => this.incrementCount())
this.decrementElement.addEventListener("click", () => this.decrementCount())
}
incrementCount(){
this.countElement.innerText = ++this.count
}
decrementCount(){
this.countElement.innerText = --this.count
}
}
function main () {
const peopleCounter = new Counter({
countElementId: "count-el",
incrementElementId : "increment-btn",
decrementElementId: "decrement-btn"
})
}
main()
But count stops being accessible when I change it this way in the constructor:
this.incrementElement.addEventListener("click", this.incrementCount)
this.decrementElement.addEventListener("click", this.decrementCount)