Canvas Uncaught TypeError: Parent object's X and Y cannot = This object's X and Y?

Explorer ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

When a button object is clicked I want a marker to appear over it to identify that is the one that was clicked. This works fine when both objects are in the same MC, but doesn't if they're not.

Why not? 

 

this.button_01.on("click", function () {  
f_01();
this.parent.MARKER.x = this.button_01.x;
this.parent.MARKER.y = this.button_01.y;	
	});


Uncaught TypeError: Cannot read properties of undefined (reading 'x')

 

this.button_01.x; looks well defined, to me. 

Any suggestions to make this happen? Thanks!

 

TOPICS
Code

Views

104

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Nov 29, 2021 Nov 29, 2021
Colin, I got it sorted... apparently this involves Scope... a concept I have yet to understand. This is the code inside my MC that refers to the Marker in its parent; timeline root: var _this = this this.button_01.on("click", function () { f_01(); exportRoot.MARKER.x = _this.button_01.x; exportRoot.MARKER.y = _this.button_01.y; }); This makes it possible to use one parent Marker object to highlight as selected/clicked, any clickable object in multiple MC's - these MC's are buttons grouped b...

Likes

Translate

Translate
Adobe Community Professional ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

There are local to global, global to local, and local to local functions. I've never used local to local, but that may be the one that will help:

https://createjs.com/tutorials/HitTest/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

Thanks, Colin, that is an interesting article. 

 

For my case, I'm not in need of any sort of hit test, I simply want the parent object's x and y to become the same value as the x and y of the object within the MC.

 

Thanks again!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

HitTest was just that particular example. The local to local may still be important.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

I think I may see what you mean then... 

So in my case, obj1.globalToLocal(obj2.x, obj2.y);  would be:

 

this.parent.MARKER.globalToLocal(this.button_01.x, this.button_01.y); 

I'll give it a try, that would be tidier code. 

 

Thanks! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

Uncaught TypeError: Cannot read properties of undefined (reading 'globalToLocal')

 

I thought it might be too good to be true. 

 

This doesn't seem like it would be a very difficult thing to accomplish, as I simply want the parent objects x and y to be the same value as the object in the MC, I wonder why it would be such a feat? 

 

Is there a way to explain why 

this.parent.MARKER.y = this.button_01.y;

would not work? 

What is 'undefined' about this.button_01.y; exactly? 

 

What would it being 'defined' look like? 

Thanks!

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

Can you upload a simple FLA that shows the problem? It would be easier to modify your example than to create a whole new sample file.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 29, 2021 Nov 29, 2021

Copy link to clipboard

Copied

Colin,

 

I got it sorted... apparently this involves Scope... a concept I have yet to understand. This is the code inside my MC that refers to the Marker in its parent; timeline root:

 

var _this = this

this.button_01.on("click", function () {  
f_01();
exportRoot.MARKER.x = _this.button_01.x;
exportRoot.MARKER.y = _this.button_01.y;	
	});

 

This makes it possible to use one parent Marker object to highlight as selected/clicked, any clickable object in multiple MC's - these MC's are buttons grouped by category which must have their visibility switchable as a kind of filter toggle. I appreciate your helping me tackle this challenge. 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 29, 2021 Nov 29, 2021

Copy link to clipboard

Copied

LATEST

Your problem was with context, not scope.

 

Scope is the set of variables and functions that the currently executing code can directly access. In JavaScript, scope usually comprises the current function, any function that contains that function, and so on, all the way up to the global object. This is called the scope chain.

 

Context is the current value of the "this" variable. When calling a function defined inside an object, "this" references that object. BUT... inside event handlers, "this" is set to the global window object. That's why you need to either use bind() on your event handler function to fix its scope, or create a copy of "this" within the event handler's local scope that it can reference instead.

 

http://ryanmorr.com/understanding-scope-and-context-in-javascript/

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines