Buttons taking other buttons functions when executed

[Missangestgames]

Hello!

I have an issue with certain buttons seemingly taking the functions of the buttons used before them. Or I assume that it's the function taking the contents of the functions executed before them. This is my first HTML5 canvas, I've been doing dollmakers for years with Actionscript 3 (and 2 before that), so I'm still at the point where I'm not fully sure of what I'm doing.

To start of with I made a variable since I've had issues with the "bind(this)" that I'm still not fully sure what it means, I've read about it online but it didn't really clear things up for me but I've noticed that setting a variable for "this" can prevent some issues at least. So we have:

var self6 = this

Then I have a simple button which makes two movieclips go to a certain frame:

self6.Panels.Cat6.Cat6part1.Patreonbutton5.addEventListener("click", Patreonbutton5Click.bind(this));
function Patreonbutton5Click() {
self6.Hairfront1.gotoAndStop(9);
self6.Hairfront2.gotoAndStop(9);
}

Then I also have two buttons changing the colors of these two movieclips. I used to write "Hairfront1.transform.colorTransform = new ColorTransform (1, 1, 1, 1, -35, -217, -217, 0);", so now I'm looking for the equivalent in javascript and from what I've researched, this seems to be the best option:

self6.Panels.Cat6.Cat6part1.Patreonbutton8.addEventListener("click", Patreonbutton8Click.bind(this));
function Patreonbutton8Click() {
self6.Hairfront1.filters = [
new createjs.ColorFilter(1, 1, 1, 1, -35, -217, -217, 0)
];
self6.Hairfront1.cache(0, 0, 1200, 900);
}
self6.Panels.Cat6.Cat6part1.Patreonbutton9.addEventListener("click", Patreonbutton9Click.bind(this));
function Patreonbutton9Click() {
self6.Hairfront2.filters = [
new createjs.ColorFilter(1, 1, 1, 1, -35, -217, -217, 0)
];
self6.Hairfront2.cache(0, 0, 1200, 900);
}

The last buttons with their functions are doing what they should. But, if I try to press Patreonbutton5 after pressing Patreonbutton8/9, it won't do anything. If I press Patreonbutton8/9 right after Patreonbutton5, it will perform the Patreonbutton5Click function instead of their own functions. If I press Patreonbutton5 before Patreonbutton8/9 it works just as it should.

Clearly something is going on that I don't understand. Anyone here who has a clue of what I'm missing?

A bonus question as well. Since these color buttons change the color of all of the movieclips inside Hairfront1 and Hairfront 2 (there's a different movieclip on each frame) and these all have different sizes, I wasn't sure how to do with the cache. Just to check if these buttons would work at all, I decided to cache the size of the entire game. Visually it's not an issue since the transparent pixels stay transparent, but is it bad to do for any other reasons and should I cache the smallest area possible?

Thank you in advance!

[RandomlyFish]

Have you added console.log("add message here") to each of the functions to check if it's actually triggering the wrong function?

[Missangestgames · Accepted solution]

Good point! I just checked it and sure enough, it's not triggering the wrong function. Which just made me realise that it's probably the cache, so I tried to cache the items in the first function as well and now it's working properly. I guess the solution is to cache all of the movieclips and use updateCache every time I do something to the movieclips!

[ClayUUID]

Missangestgames  wrote

To start of with I made a variable since I've had issues with the "bind(this)" that I'm still not fully sure what it means, I've read about it online but it didn't really clear things up for me but I've noticed that setting a variable for "this" can prevent some issues at least.

It's actually very simple. The bind() method returns a version of the original function with the special property that it forces this to a specific value (context) when it's called, instead of whatever it would have been naturally.

The only real downside is that it doesn't play well with removeEventListener(), since bind() returns a new, unique function object every time it's used.