HTML 5 Canvas: How to bind(addEventListener) a function from other frames

[jekaterina2]

In frame one, I have the below codes.

this.close_definition_btn.addEventListener("click", acloseDefinition.bind(this));
this.acloseDefinition = function closeDefinition() {
this.definition_btn.visible = true;
this.close_definition_btn.visible = false;
this.book_definition.visible = false;
}

Frame two.

this.close_definition_btn.addEventListener("click", acloseDefinition.bind(this));

The two frames share the same button, and when it's clicked, a function is triggered.

But console error pops up, showing "acloseDefinition is not defined".

How can I fix it? Thanks.

[JoãoCésar · Accepted solution]

Hi.

When you use the 'this' keyword, you are setting/getting a property or method to/of an object. In your case, the main timeline. So you don't need to add the event listener in both frames. Actually, you don't need the code in the second frame at all.

And to correctly add the event listener, you have to use the 'this' keyword when passing the handler function. Like this:

this.close_definition_btn.addEventListener("click", this.acloseDefinition.bind(this));

I hope this helps.

Regards,

JC