removeChild movieclip not working

[codeBeastAdobe]

Hi.

I used this code to add a moveclip dymanically.

var Tania = new lib.popup_Tania();
Tania.x = 150;
Tania.y = 150;
exportRoot.addChild(Tania);

I try to remove the mc with the following code with the creatjs.Ticker.on block of code but it doesn't work.

function nextFunction() {

	//exportRoot.removeChild(Tania);
	//removeChild(exportRoot.Tania);
	createjs.Ticker.on("tick", function(e)
{
    exportRoot.removeChild(exportRoot.Tania);
});

	this.btn.removeEventListener("click", clickHandler);
	this.nextButton.removeEventListener("click", nextHandler);
	this.gotoAndPlay("ex2");
}

[kglad]

if the removeChild code is on a different frame than the addChild code, use:

// to add

this.Tania = new lib.popup_Tania();
this.Tania.x = 150;
this.Tania.y = 150;
exportRoot.addChild(this.Tania);

// to remove

exportRoot.removeChild(this.tania);  // if this code is in a function, make sure "this" is properly defined

[codeBeastAdobe]

It's all on the same frame.

These are the two functions. I put the "this" keyword in.

When I called nextFuntion() from my code it does work as it moves to the next frame.

Still doesn't work.

function addPopup() {
	
	
	var Tania = new lib.popup_Tania();
    this.Tania.x = 150;
    this.Tania.y = 150;
	exportRoot.addChild(this.Tania);

}

function nextFunction() {

	exportRoot.removeChild(this.Tania);
	this.gotoAndPlay("ex2");
}
	

[kglad · Accepted solution]

1. that's not what i suggested.  and

2. you're putting the code in a function where you were warned you need to assure "this" is properly defined (which you probably also failed to do).

anyway, with the code all in one frame you don't have to contend with scope issues and "this" and can simply use:

var Tania = new lib.popup_Tania();

function addPopup() {
Tania.x = 150;
Tania.y = 150;
exportRoot.addChild(Tania);

}

function nextFunction() {

exportRoot.removeChild(Tania);  // you should have some error checking to assure addPopup() was called
this.gotoAndPlay("ex2");   // oops, you're using "this" here so you do need to pass "this" when calling nextFunction by appending bind(this) to your function reference where "this" is defined.  ie, nextFunction.bind(this)
}

[codeBeastAdobe]

Thank you very much.

[kglad]

you're welcome.

did you get it all working?

[codeBeastAdobe]

Oh sorry, yes, it works perfectly.

The problem was caused by me declaring the var Tania inside the function and not up the top. So it was outside of scope when trying to remove from another function. When you posted, you did write it outside the function but I hadn't noticed as I was focusing on the "this" keyword.

I have also started to use the console.log which highlighs all my errors. What a lifesaver! 

I'm not sure if I an supposed to ask about the "this" keyword here. If not, I will write another post.

Do I append the "this" keyword to my objects if I want to access that code on another frame? ie: If I write all my code on one frame, I don't need to add "this" to any of my objects.

[kglad]

yes, when your write:

var whatever = "local_to_frame";

whatever is scoped to the frame that contains the code.  ie, whatever in all other frames is undefined.

also, if you use var within a function:

function testF(){

var whatever = "local_to_testF"

}

whatever is, not only undefined outside the function, it's not even defined on another call to testF until it's redefined.  ie,

function testF(){

if(whatever=="local_to_testF"){

// this will never execute no matter how many times testF is called

} else {

var whatever="local_to_testF";

}

}

this.whatever = "not_local";

is defined everywhere after it executes.   but if you check console.log(whatever) after the above, it is undefined because whatever is NOT the same as this.whatever.

if your code is on one frame of each timeline, you can use var to define variables.  but you still need to use "this" to reference on-stage objects:

this.button1.addEventListener("click",f);

function f(){

this.button1.x += 5;  // -> error because "this" is undefined here

}

you can use "bind" to define "this" in a function: typically, that would be

this.button1.addEventListener("click",f.bind(this));

function f(){

this.button1.x += 5;  // works

}

but bind is much more flexible.  eg, 

this.button1.addEventListener("click",f.bind(this.button1));  // this.button1 can be referenced by "this" in f

function f(){

this.x += 5;  

}

[codeBeastAdobe]

Excellent Thank you for taking the time to explain all that.

[kglad]

you're welcome.