Trouble with using variable to store Frame label and then gotoAndPlay(variable) Animate HTML5 Canvas

[Pietr]

Hello, I'm in the midst of trying to convert an AS3 project to HTML5 Canvas. Mostly working, but variables are giving me trouble. I imagine it's something simple in my technique or coding, but I've searched threads and not found any question similar enough for their solutions to work. I'll add that WHile I've used Flash a lot in the past, this project is my first in about 10 years, and the first time I've used HTML5 Canvas. So my knowledge is quite limited.

So... I have a realtively simple timeline, image animations of medical equipment coming in and out with stops in the timeline to give specifications and allow buttons to be clicked to choose what to see next. In the first frame I declare a variable:

window.destination = "Config111";

where Config111 is a frame label. A few frames later, I use this command:

this.gotoAndPlay(window.destination);

and when testing the movie it works. I end up at the expected frame. But now my problems start. On the frame labeled Config111, there is a stop action, and I have the several buttons each one with a click handler like this:

this.stop();


this.UD0_btn.addEventListener("click", UD0_btn_clicked3.bind(this));
function UD0_btn_clicked3() {
	window.destination = "Config011";
	this.play();
}

When a user clicks a button, the timeline starts to play again, the medical equipment is removed, and then there's a keyframe with script to remove the event handlers and instruct the timeline to gotoAndPlay the destination frame:

this.UD0_btn.removeEventListener("click", UD0_btn_clicked3);

this.gotoAndPlay(window.destination);

At this point, the gotoAndPlay command seems to be ignored, and the timeline keeps playing till it reached the next stop();. So I don't know if my problem is that I'm setting the variable to something that isn't understood, or if I'm somehow using the gotoAndPlay command incorrectly. I do have my frame labels on a separate layer from my scripts, and my scripts layer is called "scripts" and labels layer called "labels" if that makes any difference.

Thanks immensly for any help/direction you can give.
Pietr

[Pietr]

I'll add that I've tried various combinations of window.destination and this.destination without success. Perhaps I just haven't hit on the correct combination, or perhaps made a coding error?

[ClayUUID · Accepted solution]

Check your browser's developer console for errors.

[Pietr]

Thank you Clay, never really worked with Javascript so that didn't even occur to me. Looks like the problem is with the removal of the mouse event listeners, (UD0_btn_clicked3 is undefined) I'm guessing because I remove on a different frame then the one it's initialized on. And once the error occures, I'm guessing all other commands on that frame are ignored and the timeline plays on. Maybe changing the removal code to this might work? 

this.UD0_btn.removeEventListener("click", this.UD0_btn_clicked3);

I commented out the event listener removal code, and the navigation seems to work. So the questions is, do I need to remove the event listeners? I seem to remember problems in Actionscript if I didn't, but maybe HTML5 canvas is OK with that?

Thanks again Clay, mad respect for you who can keep this programming stuff straight. I've tried to get a handle on coding, but never made an real progress.

[ClayUUID]

In published Canvas documents the code for every frame is wrapped in a function. You defined your event handler function inside a frame function, so it's not accessible from another frame's function.

And, even if it was accessible, removing the event listener wouldn't work, because you're using bind(), which return a new function wrapper. removeEventListener() requires being passed the exact same function reference.

So you're going to have to create either a timeline property that stores a reference to the bound function...

this.boundClickHandler = myClickHandler.bind(this);

...and then use that for all event adding/removing code, or create a local variable referencing the timeline you want to control...

var _this = this;

...so you don't have to bind() the event handler function, it just references _this instead of this, which works because JavaScript uses lexical scoping. But that would still have the problem noted above with removing the event listener. You could make the event handler function visible to all functions on the current timeline by declaring it as a method...

this.myClickHandler = function() {

...or you could avoid using removeEventListener() altogether by just having the event handler remove its own listener instead of removing it on a subsequent frame.

https://createjs.com/docs/easeljs/classes/Event.html#method_remove