Copy link to clipboard
Copied
How to use removeEventListener is confusing the hell out of me or that my code is rather poorly made and therefore some sort of conflict going on.
I have a complicated project, made up of multiple on screen functions using an onscreen key pad to input numbers and text.
The problem being is when I press 'Enter' and get the error message for an incorrect input. When I then press the 'delete' key to remove the incorrect number(s) it takes out 4 numbers at a time. Then when I press a key for a new number input it puts 4 of the same number in, and each time I do this it goes up in fours.
There is a global var called "rootADAD = this" that is referenced earlier in the timeline, here is my code for this particular frame:
this.stop();
//
this.keyPad.visible = true;
this.keyPad.gotoAndStop(0); //resets the key pad MC to numbers
//Keypad Enter disable
this.keyPad.keyEnter.mouseEnabled = true;
//// ERROR POPUP /////
this.errorMsg.visible = false;
//-- FUNCTIONS
function errorMsgHide() {
rootADAD.errorMsg.visible = false;
//NAV removeEventListener
rootADAD.keyPad.keyNext.removeEventListener("click", navNext);
rootADAD.keyPad.keyPrev.removeEventListener("click", navPrev);
//NUMBERS removeEventListener
rootADAD.keyPad.keyOne.removeEventListener("click", buttonOne);
rootADAD.keyPad.keyTwo.removeEventListener("click", buttonTwo);
rootADAD.keyPad.keyThree.removeEventListener("click", buttonThree);
rootADAD.keyPad.keyFour.removeEventListener("click", buttonFour);
rootADAD.keyPad.keyFive.removeEventListener("click", buttonFive);
rootADAD.keyPad.keySix.removeEventListener("click", buttonSix);
rootADAD.keyPad.keySeven.removeEventListener("click", buttonSeven);
rootADAD.keyPad.keyEight.removeEventListener("click", buttonEight);
rootADAD.keyPad.keyNine.removeEventListener("click", buttonNine);
rootADAD.keyPad.keyZero.removeEventListener("click", buttonZero);
//LETTERS removeEventListener
rootADAD.keyPad.selectLetter.removeEventListener("click", selectLetterChoice);
//OTHER removeEventListener
rootADAD.keyPad.keyEnter.removeEventListener("click", buttonEnter);
rootADAD.keyPad.keyDelete.removeEventListener("click", buttonDelete);
rootADAD.keyPad.keyCancel.removeEventListener("click", buttonCancel);
}
//-- EVENTLISTENERS
this.errorMsg.addEventListener("click", errorMsgHide);
//// KEY PAD /////
//-- Variables Local
var priorityLineEntry = rootADAD.priorityLine.priorityLineTxt;
var letterChoice = rootADAD.keyPad.letterOption;
//-- Functions
function buttonOne() {
rootADAD.priorityLine.priorityLineTxt.text += "1";
}
function buttonTwo() {
rootADAD.priorityLine.priorityLineTxt.text += "2";
}
function buttonThree() {
rootADAD.priorityLine.priorityLineTxt.text += "3";
}
function buttonFour() {
rootADAD.priorityLine.priorityLineTxt.text += "4";
}
function buttonFive() {
rootADAD.priorityLine.priorityLineTxt.text += "5";
}
function buttonSix() {
rootADAD.priorityLine.priorityLineTxt.text += "6";
}
function buttonSeven() {
rootADAD.priorityLine.priorityLineTxt.text += "7";
}
function buttonEight() {
rootADAD.priorityLine.priorityLineTxt.text += "8";
}
function buttonNine() {
rootADAD.priorityLine.priorityLineTxt.text += "9";
}
function buttonZero() {
rootADAD.priorityLine.priorityLineTxt.text += "0";
}
//LETTERS
function selectLetterChoice (){
rootADAD.priorityLine.priorityLineTxt.text += letterChoice.text;
}
//OTHER BUTTONS
function buttonEnter() {
if (priorityLineEntry.text === "800"){
rootADAD.play();
}else{
rootADAD.errorMsg.visible = true;
}
}
function buttonDelete() {
rootADAD.priorityLine.priorityLineTxt.text = rootADAD.priorityLine.priorityLineTxt.text.slice(0, -1);
}
function buttonCancel() {
rootADAD.priorityLine.priorityLineTxt.text = "";
}
//-- Event Listeners
//NUMBERS
this.keyPad.keyOne.addEventListener("click", buttonOne);
this.keyPad.keyTwo.addEventListener("click", buttonTwo);
this.keyPad.keyThree.addEventListener("click", buttonThree);
this.keyPad.keyFour.addEventListener("click", buttonFour);
this.keyPad.keyFive.addEventListener("click", buttonFive);
this.keyPad.keySix.addEventListener("click", buttonSix);
this.keyPad.keySeven.addEventListener("click", buttonSeven);
this.keyPad.keyEight.addEventListener("click", buttonEight);
this.keyPad.keyNine.addEventListener("click", buttonNine);
this.keyPad.keyZero.addEventListener("click", buttonZero);
//LETTERS
this.keyPad.selectLetter.addEventListener("click", selectLetterChoice);
//OTHER
this.keyPad.keyEnter.addEventListener("click", buttonEnter);
this.keyPad.keyDelete.addEventListener("click", buttonDelete);
this.keyPad.keyCancel.addEventListener("click", buttonCancel);
//--Fade up Prompt
var prompt_PriorityLine_FadeInCbk = fl_FadeSymbolIn_2.bind(this);
this.addEventListener('tick', prompt_PriorityLine_FadeInCbk);
this.prompt_PriorityLine.alpha = 0;
function fl_FadeSymbolIn_2()
{
this.prompt_PriorityLine.alpha += 0.01;
if(this.prompt_PriorityLine.alpha >= 1)
{
this.removeEventListener('tick', prompt_PriorityLine_FadeInCbk);
}
}
There is nothing more beyond line 112 as it's a generic code snippet for a fade.
From line 12 I've put my removeEventListeners, as anywhere else they seem to mess with the timeline previous to this particular frame. The keypad is used about 15 times at different frames along the time line and for other inputs.
the frustrating part, I used them(removeEventListeners) on a similar frame earlier and saved as a separate project, and it worked. However, my removeEventListeners were under a button control to take the user to the next frame.
Did that make sense? I'm UK based in case of delays with my responses. Thank you.
Dom
checking for the event listener before adding should fix the problem. but it's not clear why you're even trying to repeatedly add the listener and repeatedly defining buttonOne() etc. you're over-complicating your project.
you only need to add the listener once and define the functions once in the first keyframe that contains keyPad. on that layer that contains keyPad there should be no other keyframes. if you don't want keyPad to appear on some frames and reappear on others, use its visible
...Copy link to clipboard
Copied
if you have difficulty controlling your listeners, use hasEventListener():
if(!rootADAD.keyPad.keyOne.hasEventListener('click')){
rootADAD.keyPad.keyOne.addEventListener('click'),buttonOne;
}
but you probably have more extensive problems with code you're not showing.
Copy link to clipboard
Copied
thanks you for that, I'll certainly try hasEventListener() out. But as you say, my code in the previous frames could be having an effect.When I view in developer tools mode on my browser and go through the frames
When I view in developer tools mode on my Opera browser and go through the frames all is ok until I do my 'deliberate' mistake on the number input to trigger the error message. Upon pressing the error message to hide it I get these alerts in the console:
TCC_emulation_v6-2_ADAD.js?1503407559197:21875
Uncaught ReferenceError: navNext is not defined
at errorMsgHide (TCC_emulation_v6-2_ADAD.js?1503407559197:21875)
at lib.ERRORMsg.b._dispatchEvent (createjs-2015.11.26.min.js:12)
at a.b.dispatchEvent (createjs-2015.11.26.min.js:12)
at lib.Stage.b._dispatchMouseEvent (createjs-2015.11.26.min.js:13)
at lib.Stage.b._handlePointerUp (createjs-2015.11.26.min.js:13)
at lib.Stage.b._handleMouseUp (createjs-2015.11.26.min.js:13)
at f (createjs-2015.11.26.min.js:13)
I'm unable to fathom what this means for now. Anyway, I'll crack on with your suggestion, thank you for that.
Dom
Copy link to clipboard
Copied
open your js file in a text editor.
line 21845 is referencing navNext instead of this.navNext or rootADAD.navNext or something similar.
from the surrounding lines of code you can see what frame contains the code and where it's located in your project so you can fix that.
Copy link to clipboard
Copied
thanks for interpreting that the console error, that bit fixed now, so the error doesn't come up. I've still yet to try the original help idea.
for the benefit of others, i added rootADAD. to navNext, and susequently all the rest of my removeEventListeners.
rootADAD.keyPad.keyNext.removeEventListener("click", rootADAD.navNext);
thanks
Copy link to clipboard
Copied
checking for the event listener before adding should fix the problem. but it's not clear why you're even trying to repeatedly add the listener and repeatedly defining buttonOne() etc. you're over-complicating your project.
you only need to add the listener once and define the functions once in the first keyframe that contains keyPad. on that layer that contains keyPad there should be no other keyframes. if you don't want keyPad to appear on some frames and reappear on others, use its visible property. if you want to change its size/location/etc, also use js code.
Copy link to clipboard
Copied
so my repeated adding the same eventListener(s) through out my timeline is a likely cause for my problem?
my logic for adding the listener to each frame that there was a change in scenario was when I needed the 'enter' button to do or go somewhere different.
The keypad is on its own layer and is from frame 1 but is invisible until needed further down the timeline. below is a screen shot of frame 110 of my project to show what I'm talking about
thanks for the help, all comments are seriously taken on board.
Dom
Copy link to clipboard
Copied
as long as you're not making your keyPad invisible by removing it from the timeline, it's ok. if you ever removed it from the timeline and then replaced it, there could be a problem.
if you want buttons (enter or anything else) to do one thing on frame A and something else on frame B, remove the listener when you exit frame A and add another listener on frame B.
Copy link to clipboard
Copied
To answer the original question, your removeEventListeners don't work when moved into other clips because they have no idea what buttonOne, buttonTwo, etc are. Functions declared via the function statement are scoped to only the code in the frame where they're declared. To make a function visible to an entire movieclip, you define it like this instead:
this.buttonOne = function() {
// yadda yadda
}
That being said, you can just use removeAllEventListeners() instead. Now, if you use this on a button with no arguments it will break the button, because the rollover event listeners will be removed as well. However, you can safely use it on a button by specifying the type of listeners you want removed. So this would work fine:
rootADAD.keyPad.keyOne.removeAllEventListeners("click");
Copy link to clipboard
Copied
I have tried all kinds of the above suggestions for which I am grateful for the time spent answering my query. But it is quite probable I'm implementing them incorrectly, and I still have the same problem with my dynamic text field not behaving as I would expect after 'Enter' is pressed, so perhaps my original question about removeEventListeners was wrong.
This is the frame and with the error message red box shown (otherwise hidden until triggered by an incorrect input)
So upon landing on this frame, the user is prompted to input numbers/characters that will populate the green outline Priority Line box (a dynamic text field). They can press 'delete' and remove a number/character on each press or 'Cancel' to empty the dynamic text field.However, once 'Enter' is pressed and if correct it goes on to the next keyframe, but if wrong, the error message pops up. From which point, when 'Delete' is pressed it no longer removes each character, it takes out up to 4 and when a number is pressed it puts in 4 of the same number in. This seems to multiply a lot should I come out of this keyframe and back again later.
However, once 'Enter' is pressed and if correct, it goes on to the next keyframe, but if wrong, the error message pops up. From which point, when 'Delete' is pressed it no longer removes each character singularly, but it takes out up to 4 and when a number is pressed it puts in 4 of the same number in. This strangely seems to multiply a lot should I come out of this keyframe and back again later.
Here is the code again, without removeEventListeners, because I still don't know what I'm doing...
this.stop();
//
this.keyPad.visible = true;
this.keyPad.gotoAndStop(0); //resets the key pad MC to numbers
//Keypad Enter disable
this.keyPad.keyEnter.mouseEnabled = true;
//// ERROR POPUP /////
this.errorMsg.visible = false;
//-- FUNCTIONS
function errorMsgHide() {
rootADAD.errorMsg.visible = false;
}
//-- EVENTLISTENERS
this.errorMsg.addEventListener("click", errorMsgHide.bind(this));
//// KEY PAD /////
//-- Variables Local
var priorityLineEntry = rootADAD.priorityLine.priorityLineTxt;
var letterChoice = rootADAD.keyPad.letterOption;
//-- Functions
function buttonOne() {
rootADAD.priorityLine.priorityLineTxt.text += "1";
}
function buttonTwo() {
rootADAD.priorityLine.priorityLineTxt.text += "2";
}
function buttonThree() {
rootADAD.priorityLine.priorityLineTxt.text += "3";
}
function buttonFour() {
rootADAD.priorityLine.priorityLineTxt.text += "4";
}
function buttonFive() {
rootADAD.priorityLine.priorityLineTxt.text += "5";
}
function buttonSix() {
rootADAD.priorityLine.priorityLineTxt.text += "6";
}
function buttonSeven() {
rootADAD.priorityLine.priorityLineTxt.text += "7";
}
function buttonEight() {
rootADAD.priorityLine.priorityLineTxt.text += "8";
}
function buttonNine() {
rootADAD.priorityLine.priorityLineTxt.text += "9";
}
function buttonZero() {
rootADAD.priorityLine.priorityLineTxt.text += "0";
}
//LETTERS
function selectLetterChoice (){
rootADAD.priorityLine.priorityLineTxt.text += letterChoice.text;
}
//OTHER BUTTONS
function buttonEnter() {
if (priorityLineEntry.text === "800"){
rootADAD.play();
}else{
rootADAD.errorMsg.visible = true;
}
}
function buttonDelete() {
rootADAD.priorityLine.priorityLineTxt.text = rootADAD.priorityLine.priorityLineTxt.text.slice(0, -1);
}
function buttonCancel() {
rootADAD.priorityLine.priorityLineTxt.text = "";
}
//-- Event Listeners
//NUMBERS
this.keyPad.keyOne.addEventListener("click", buttonOne);
this.keyPad.keyTwo.addEventListener("click", buttonTwo);
this.keyPad.keyThree.addEventListener("click", buttonThree);
this.keyPad.keyFour.addEventListener("click", buttonFour);
this.keyPad.keyFive.addEventListener("click", buttonFive);
this.keyPad.keySix.addEventListener("click", buttonSix);
this.keyPad.keySeven.addEventListener("click", buttonSeven);
this.keyPad.keyEight.addEventListener("click", buttonEight);
this.keyPad.keyNine.addEventListener("click", buttonNine);
this.keyPad.keyZero.addEventListener("click", buttonZero);
//LETTERS
this.keyPad.selectLetter.addEventListener("click", selectLetterChoice);
//OTHER
this.keyPad.keyEnter.addEventListener("click", buttonEnter);
this.keyPad.keyDelete.addEventListener("click", buttonDelete);
this.keyPad.keyCancel.addEventListener("click", buttonCancel);
Again, I am grateful any help or guidance to help me fix this.
Thank you
Copy link to clipboard
Copied
i don't see any problem with that. to confirm the problem is not shown in that code:
create a new canvas project with that code and your keypad, textfield and error message movieclip and test.
Copy link to clipboard
Copied
clay's right. you can simplify all that keyboard numbercode with
function buttonF(e) {
rootADAD.priorityLine.priorityLineTxt.text += e.currentTarget.ivar;
}
for (var i = 0; i < 10; i++) {
this.keyPad['key' + i].addEventListener("click", buttonF);
this.keyPad['key' + i].ivar = i
}
Copy link to clipboard
Copied
Just done that, and yes, that screen/keyframe works as I would like it. So it is obviously something elsewhere in my timeline causing this problem/fault.
The simplified code... well I'm just gob-smacked you can do that. I have a feeling someone enjoyed themselves writing that! You could attempt to explain it to me, but I doubt I'd understand, really.
Anyhow, I tried it out on my single frame test but only the keyPad was visible and the rest of the graphics didn't display and I got this error in the console:
TCC_emulation_v6-3_ADAD_priorityLine.js?1503651449775:5095 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at lib.TCC_emulation_v63_ADAD_priorityLine.frame_0 (TCC_emulation_v6-3_ADAD_priorityLine.js?1503651449775:5095)
at a.b._runActions (createjs-2015.11.26.min.js:17)
at a.b.setPosition (createjs-2015.11.26.min.js:17)
at a.b.setPosition (createjs-2015.11.26.min.js:17)
at lib.TCC_emulation_v63_ADAD_priorityLine.c._updateTimeline (createjs-2015.11.26.min.js:14)
at lib.TCC_emulation_v63_ADAD_priorityLine.c.advance (createjs-2015.11.26.min.js:14)
at lib.TCC_emulation_v63_ADAD_priorityLine.c._tick (createjs-2015.11.26.min.js:14)
at lib.Stage.b._tick (createjs-2015.11.26.min.js:13)
at lib.Stage.b.tick (createjs-2015.11.26.min.js:13)
at lib.Stage.b.update (createjs-2015.11.26.min.js:13)andt
and when I clicked on the .js link it was pointing at this line with a cursor flashing before the period of addEventListener:
this.keyPad['key'+i].addEventListener("click", buttonF);
If you allow more time to this thread and fix the above, that would be great, but again it is unlikely I'll understand what you did.
Thank you, for taking the time to help me.
Dom
Copy link to clipboard
Copied
you have to change the key instance names on keyPad's timeline from
keyZero, keyOne etc
to
key0, key1 etc
Copy link to clipboard
Copied
...unbelievable! I had a feeling it was the instance names needing to be altered but had no idea what to.
Thanks very much for this, I find it mind-boggling that you can write code in that way.
with regards, Dom
Copy link to clipboard
Copied
by prudently choosing instance names you can simplify code and make it easier to maintain and debug.
Copy link to clipboard
Copied
All those functions and clips named with spelled-out numbers instead of actual numbers is giving me a migraine.