Problem with JS Class and Event Listener

Question

I have a JS object which contains a div element. The "log" method of that object is called when the div is clicked, but it fails to read the value of the property "num". I need to know why it's happening and how to solve it.
https://sololearn.com/compiler-playground/WHM9TyFgir33/?ref=app

Answer 1

You need to bind the log to the instance by changing this.log.bind(this) in the 11 line.

Answer 2

Hi friend 😃👋🏻

Fandi Presly Simamora is true you should use the bind function; why!?
That's because when the click is triggered, the "log" method is called separately, so "this" is lost! It is the same as you use "log" function out of your class, so you don't have "num". That's why it prints "undefined".
By using the "bind" function, you are reminding your function that when the click event is triggered, you belong to "clickableDiv" class. Now it works!

Answer 3

you can also do this

this.div.addEventListener(
"click",
()=>this.log()
);

Answer 4

Thanks!
Now, why does it work?

Answer 5

🇮🇱 Radin Masiha 🇮🇱 I see!

Answer 6

Yeah, that works, too