HTML5 Canvas: click function ignored?

[Jeffery.Wright]

This is peculiar.  I have a MovieClip with 2 frames. 

This code is on the first frame:

this.AppInfo.on('click', function () {
	 this.gotoAndStop(1);
	console.log("Button was clicked!");
});

this.stop();

When AppInfo is clicked, the c.log works and no errors. but the clip does not move to the next frame. 

Shouldn't it? 

Any idea what's going on? File is attached.  Or, was... 

Why can't I attach a .fla? 

I tried to attach it's .js file instead but got this:

Why doesn't this site recognize a .fla file? 

[Jeffery.Wright]

So, in this MC I added this to the top layer:  var _this = this;

I changed the command to _this.gotoAndStop(1);  and it worked, the clip went to the next frame.

On the next frame there is an object to send the clip back to frame 0, using this code: 

this.BG.on('click', function () {
	 _this.gotoAndStop(0);
});

But it produces the error:  Uncaught ReferenceError: _this is not defined  ...

Wasn't _this defined in the first layer which spans the entire clip? 

Does it have to be defined for every frame? 

Thanks. 

[JoãoCésar]

Hi.

Variables are scoped to the frame in which they were declared because Animate will wrap the script of each frame in a separate function.

So to have a value accessible in all frames of the same parent, you need to store this value as a property of this same parent, call bind in the event handler function or use a arrow function.

Or you can declare another _this variable in all the required frames.

Regards,
JC

[Jeffery.Wright]

Scoping is voodoo to me... in the root of my app on the first layer that spans the entire timeline I have:

var _this = this;

Shouldn't that make the variable available to everything in the entire app? 

If it doesn't, what would? Call bind, arrow method, I will look those up. 

Thanks man!

[JoãoCésar]

It's because var _this = this; will live inside of the function that Animate will generate for that particular frame (see images above) and in JavaScript you cannot access an internal/local variable of a function from outside the function.