AnimateCC Canvas: Function is Undefined?

Report · Nov 16, 2018

Really?

It's defined on the very first frame, see:

function url_PP (){

window.open(pp_URL, "Product_Tab");

}

btw, this produces the same error:

this.url_PP=function(){

window.open(pp_URL, "Product_Tab");

}

So, where is 'url_PP' is undefined coming from?

which is generated from this line on the fourth frame, separate layer:

this.b_PP.addEventListener("click", url_PP);

and the variable is declared a line before that:

pp_URL = "http://www.website.com";

So yes, it is defined, what gives?

Any idea?

Thanks!

Report · Nov 16, 2018

Functions defined with just a function declaration only exist in the frame where they're defined. So of course you can't call it in another frame. It doesn't exist anymore.

Functions defined as methods of the this object CAN be accessed anywhere in the same movieclip. But only if you remember to call them as a method of this, which you failed to do.

The above also applies for variables. "var myURL" will only be accessible in its frame. "this.myURL" will be accessible to the entire clip.

BTW, having a variable named pp_URL and a function named url_PP is an insanely bad idea, for reasons I hope would be self-evident.

Report · Nov 16, 2018

Thanks for the response, fwiw I changed the function name to open_URL, but I doubt that will change anything.

function open_URL (){

window.open(pp_URL, "Product_Tab");

}

I also tried

this.b_PP.addEventListener("click", this.open_URL );

Which instead of working, produced an even more enigmatic and useless error:

Unable to get property 'handleEvent' of undefined or null reference in IE

TypeError: h is undefined in FFox...

All I want is for one button to open various url's defined in the variable pp_URL, open whatever the current value of pp_URL is declared to be.

I placed the addEventListener in the same frame as the function and removed it's "this" and all seems to be working for now... what a crazy process just to get this to do something so simple.

If for some reason I actually wanted a program that produces lots of mysterious and unhelpful error messages, this program would be my top choice.

Thanks again!

Report · Nov 16, 2018

The errors are produced by the respective browsers' JavaScript engines, because your JavaScript code is broken. You don't seem to have paid any attention to what I just told you about how function scoping works, because you keep defining things in an inaccessible way.

Look, this is very simple...

Frame 1:

var _this = this;

this.open_URL = function () {

window.open(_this.pp_URL, "Product_Tab");

}

The _this is necessary because (unless you use bind), event handlers call functions in the window scope instead of the local scope. pp_URL could have been placed in the global scope, on the window object, but that's considered bad practice (for good reason).

Then on frame whatever:

this.pp_URL = "https://www.website.com/";

this.b_PP.addEventListener("click", this.open_URL);

HOWEVER...

You could save yourself all this trouble by just using the on method, which supports passing data to an event handler.

Frame 1:

this.open_URL = function (evt, url) {

window.open(url, "Product_Tab");

}

Frame whatevs:

this.b_PP.on("click", this.open_URL, this, false, "https://www.website.com/");

Report · Mar 01, 2023

Having run into another issue related to this, I found this old post for guidance.

I have a function using 'this' to make it accessible everywhere in the clip, but it doesn't work:

Again, not defined? Yet here it is, perfectly defined:

I included it on the frame that calls the function when a button is clicked, to see the function being ignored with my own eyes.

The functions within menuToggle are defined like so, just above line 1428:

this.close_A=function(){
if ( menuA_state == "open")
{exportRoot.main_NAV.menu_A.play();}
	}

There must be a reason why I'm getting this surreal error, any idea what it could be?

I am attempting to create a modular, reusable canvas accordion menu system.

Am I reinventing the wheel? I haven't been able to find source code for such a movieclip anywhere.

Thanks.

Report · Mar 01, 2023

use this.menuToggle(); // assuming "this" is in the correct context.

Report · Mar 01, 2023

Thanks kglad, but that produces "this.menuToggle is not a function"

It's baffling things like this that stop people dead in their tracks.

When using _this. then my sub functions are being declared an undefined, kind of encouraging?

So, revised the code thusly, and it seems to work...

var _this = this;

this.menuToggle=function(){
_this.close_A();
etc... 
	}

However, the reason I want the functions accessible globally, from anywhere within the canvas is because the accordion I am trying to make is a series of nested clips Menu_A / Menu_B / , etc... that when clicked to open checks the other Menu_clips for being open and if so, closes them. Menu_A when open, pushes Menu_B down, which contains Menu_C and so on.

Every clip has a button to play it's containing MC to the open state, pushing it's contained next Menu item downward:

exportRoot.main_NAV.menu_A.menu_B.menu_C.menu_D.menu_E.menu_F.menu_G.menu_H.menu_I.menu_J

Every one of the clips who's button (b_taxL1) plays itself to the open position must be able to fire the menuToggle function that closes any other open clips.

The functions are all on the first frame of the container MC main_NAV. The toggle buttons in the subsequent nested clips should be able to fire the menuToggle function, since it is Global, correct?

If not, why not?

When the canvas is run in that seemingly perfectly reasonable structure, it no worky:

this.tax_L1.on("click", function()
{
_this.play();
_this.menuToggle();
	
});

results in:

But, it is a function, isn't it? A Global function. No?

Thanks again.

Report · Mar 01, 2023

again:

this.menuToggle(); // assuming "this" is in the correct context.

ie, if you're adding code on some timeline, other than the one with the function definition, you have to use the correct reference to the functions timeline. for novices (and sometimes others), just having a universal works better:

exportRoot.menuToggle=function(){

//...

}

then you can call that function from any timeline using:

exportRoot.menuToggle();

Report · Mar 01, 2023

Well, that worked, thanks!

I still do not understand why if a function is obviously defined, why the error that a function is not defined occurs? Shouldn't the error be something else?

Anyway, thanks again, I hope other people find this useful as Canvas JS is far more frustrating than the good old days of AS3 on the web, which was an unforgiving enough code lang.

If anyone cares for it, they can download a copy of the first working version of my Accordion Menu for HTML5 Canvas v1... I have no doubts that it can be coded with more sophistication than my usual ham-f*sted technique.

What is with this forum? Get this:

The message body contains fist-ed, which is not permitted in this community. Please remove this content before sending your post.

Wtf?

Why does this forum keep deleting my 22kb .fla file?

Report · Mar 01, 2023

no, the error message makes sense, at least, to coder that understands what's occurring. ie, you're directing the compiler to find menuToggle on the timeline where you called it. there is no such function there.

your entire project is not searched for something that looks similar to what you're coding which a human would see (if they looked) and maybe give a more informative error message: that function is on another timeline.