multiple ADOBE ANIMATE CC buttons to control the timeline not working

Question

I have to control the timeline of an animation for html5 canvas. I made all buttons and edited all codes. strangely all buttons execute the same function.

this.stop()
//---------------------------------------------------------//
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    this.gotoAndPlay(32);
}

//---------------------------------------------------------//

//---------------------------------------------------------//
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));
}
function fl_MouseClickHandler()
{
    this.gotoAndPlay(212);
}

Answer 1

Please read about function hoisting; the function statements are hoisted to the top-of-the-scope, so that your code is equivalent to

function fl_MouseClickHandler() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandler() {
    this.gotoAndPlay(212);
}

...
this.stop()    
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));

---

One solution would be to use function expressions:

var that = this;
this.letterA.addEventListener("click", function () { that.gotoAndPlay(32); });

or if you insist to use bind

this.letterA.addEventListener("click", (function () { this.gotoAndPlay(32); }).bind(this));