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));

Answer 2

From what I can tell, you are binding the same function to two different button click events. You have two different definitions of this same function. One is most likely being written over the other and therefore both buttons will call fl_MouseClickHandler which will call gotoAndPlay with the same timestamp.

Quick fix could be just to change the name of fl_MouseClickHandler:

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

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

this.letterA.addEventListener("click", fl_MouseClickHandlerA.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandlerB.bind(this));

Also, you should watch how you use "this" as you may not be scoped to what you think.