Adobe Animate HTML5 - button with script does not gotoAndPlay() frame on main timeline

[j_am_I]

I have a pretty simple looking script (I think) that is not working when I click a button.

My main timeline has two frames:

1. Frame 1 - (This will be frame 0 when published because of the way CreateJS handles frames) - 
   1. On its own layer - A rectangle converted to a button symbol with an instance name of start_game.
   2. On a script layer - A script (see below).
2. Frame 2 - (This will be frame 1 when published because of the way CreateJS handles frames) -
   1. More shapes and movieclips and stuff.
   2. Another script on that same script layer (interesting note below)

The script on frame 1 is this:

this.stop();
var that = this; //The whole that=this thing I picked up from other posts because apparently you cannot use the syntax this.anything from inside a function? Whatever. It seems to work fine everywhere else I'm using it.

this.start_game.addEventListener("click", begin_to_play.bind(this)); //bound to the button with instance name of start_game

function begin_to_play(){
that.start_game.removeEventListener("click", begin_to_play);  

that.gotoAndPlay(1);
console.log("clicked start_game");
}

Here's the behaviour I see when I Ctrl / Command + Enter (WITH my browser's JavaScript Console open):

• Seems normal at first - The first frame loads and I see the button.
• Still seems normal - I get a mousover hand icon when I mouseover the button.
• This one is a little weird - There is a fucntion in the script on the second frame (the one I'm targeting to go to) and that function has a console.log command in it leftover from previous tracing and troubleshooting. I am seeing that text logged to the console even though I'm not on that frame! I'm on the first frame, so my thinking is that I should not be seeing that console log.
  To make it more interesting - There are other functions on that second frame, also with console.log commands in them, also from prior work, that DO NOT show up in the console log at this point. That one seems right to me because, once again, they are on the second frame and currently only the first frame should be loaded up.
• So then, I click the button -
  • I do get that console.log shown above that says "clicked start_game." This seems right to me.
  • I get the OTHER console.log text messages from the OTHER scripts on the second frame. This seems right.
  • I continue to get the console.log text message from that one function that was already doing it. Ok, that seems right now, because that script ought to be running now that I did a gotoAndPlay to that second frame.
  • BUT - The page/frame doesn't load visually, the objects on that frame do not appear, and the button which is visible from the first page doesn't go away.

So I conclude that the gotoAndPlay(1), which should bump the playhead down the main timeline by one frame, doesn't work. I have no ideas why not.

That weirdness with the console.log command from that function on the second frame appearing in the console when frame 1 should be the loaded frame, well that is haunting me, but I don't know what to make of it.

Any ideas?

[ClayUUID · Accepted solution]

>The whole that=this thing I picked up from other posts because apparently you cannot use the syntax this.anything from inside a function? Whatever. It seems to work fine everywhere else I'm using it.

No. Stop. This is the very definition of cargo cult programming.

The reason for that (which can be any variable name) is because inside event handlers, this points to the global window object instead of anything useful... unless you've used bind() on the event handler function, which "binds" the function to execute in a particular context (value of this). You can observe this by putting alert(this); in your event handler function with and without bind(). Stashing the desired value of this in a variable in the local scope chain circumvents this problem. So using both that and bind() is redundant. Pick one.

In this case you want to pick that, because bind() is preventing your removeEventListener() from working. removeEventListener() requires that you pass it the exact same function that you passed into addEventListener(), but bind() actually returns a new function, wrapping the original function. And no, you can't work around this by using bind() with removeEventListener. The new function is created from scratch every time you call it.

That all being said, if you've used bind(), you can still remove an event listener like so:

function begin_to_play(evt) {
     evt.remove(); 

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

Whichever way you do it basically comes down to personal preference.

[j_am_I]

Cool, thanks! That's a very rich description of the this/that connudrum! I'm hating the whole this/that thing because it's confusing, it seems arbitrary (some things seem to work with this.stuff just fine, others not), and it feels a little weird. I appreciate you taking the time to bring that extra clarity!

Do you think that (or my use of that.stuff) in my begin_to_play function is what is preventing the button-click from sending the tested project to the next frame?

I did try using the this.stuff instead of the that.stuff, but I got the exact same behaviour from the test, which is basically...nothing. Tt didn't seem to advance to the next frame (although the traces and console log statements in all those functions hit the console the same way I described above).

thxx.gotoAndPlay(1); Just doesn't seem to work either way.

Thanks again!