HTML5 Button Script

The important thing to never, ever forget about Canvas event handlers is that, unlike ActionScript event handlers, they default to executing in the global context. So "this" will point to the browser window object.

There are three major ways to deal with this. The first, as Colin illustrated, is to use bind on the event handler to correct its context.

The second way is to use a variable to reference the desired context, like so:

this.stop();

var myLocalScope = this;

this.btnPLAY.addEventListener("click", buttonPLAY);

function buttonPLAY() {

     myLocalScope.gotoAndPlay(0);

};

The third way is to use the global exportRoot variable. Adding global variables is generally a bad idea, but Animate creates this one when it publishes, so we may as well use it. exportRoot points to the root timeline object. So if the clip you want to control is on the main timeline, and named banana, you'd do this:

this.stop();

this.btnPLAY.addEventListener("click", buttonPLAY);

function buttonPLAY() {

     exportRoot.banana.gotoAndPlay(0);

};

All of these methods work equally well, and none are particularly superior to the other. Just pick whichever one works best for the circumstances.

I'd recommend reading this for a more thorough explanation of context and scope:

Understanding Scope and Context in JavaScript | Ryan Morr

BTW, naming your event handlers like "buttonPLAY" isn't great practice. Functions should be named for what they DO. Something like even just "buttonPLAYHandler" would be more clear.