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

[Jeffery.Wright]

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!

[Colin Holgate]

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/

[Jeffery.Wright]

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!

[Colin Holgate]

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

[Jeffery.Wright]

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! 

[Jeffery.Wright]

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!

[Colin Holgate]

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.

[Jeffery.Wright · Accepted solution]

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. 

[ClayUUID]

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/