About this.joinButton.button.on and root

My project link is here:
https://playcanvas.com/editor/code/936100?tabs=85514676

I just wonder when I write this.root = this.app.root.findByName(‘Root’) in UI script line 6, and want to use joinButton.button.on to active this.root.script.enabled = true, but it will show error which this.root is undefined. but later, I write this.root = this.app.root.findByName('Root') under

Ui.prototype.update = function (dt) {

and work!!! Why can’t I write this.root = this.app.root.findByName(‘Root’) in line 6? Please help me.

if I have this problem, I place all content inside the initilize, but I would prefer use Input instead of button

Ui.protoype.initialize=function(){
this.joinButton=this.app.root.findByName("Join");
//if use button element
this.joinButton.button.on("click",this.click,this);
//if use  Input=true in element
this.joinButton.element.on("click",this.click,this);
}
Ui.protoype.click=function(){
console.log("hihi joinButtonIscliked");
};

Hello, and welcome to PlayCanvas!

You do not need to search for root entity - it is already provided to you via this.app.root.
You are trying to find “Root” entity inside a root entity, which won’t work.

Also, you should move your code from inside the update() method to initialize(). Subscribing to events in update() method will cause a new subscription each frame. Please refer to the manual on using scripts:

https://developer.playcanvas.com/en/user-manual/scripting/anatomy/

Dear LeXXik,
It’s makes sense :slight_smile:
but later , i fellow yours, and move to initialize(), but console show [UI.js?id=85514676&branchId=15b38d69-00b6-43ec-bd95-86cccbc0ae98:10]: Uncaught TypeError: Cannot read properties of undefined (reading ‘root’)

computer don’t know this.app.root…

You can add attribute in editor
Ui.attributes.add(“root”, { type: “entity” });

It is because of the way you are using this keyword inside a function. this always points to the current scope, so in that case points to function(event) {} scope, which is a global window, which has no app property in it. You need to reference it from outside, like:

var app = this.app;
button.on('click', function(event) {
  app.root...
});

thank your reply. I add var app = this.app , and also refer app.root. but there is no script element under app.root. if console.log(app.root.script), it will show undefined.

Hi @Jason_Tsai,

Try looking at the first child on root, that would be the scene ‘Root’ entity:

app.root.children[0].script.enabled = true;
1 Like

thanks Leonidas, LeXXik and isvaku. It solved when i add app.root.children[0].script.enabled = true;

2 Likes

Yes, my mistake, the app.root is pointing to the very first entity, which holds “Root” entity. So your initial search was correct: this.app.root.findByName("Root").

2 Likes

but strange is: when I use this.root=this.app.root.findByName(“Root”), there will be error if this.root.script.enabled=true; there is script element under Root, but there is not enabled method. I am curious if I want to use this.root. How can I find script.enabled?

Do you use this code inside the button event? If that’s the case I suggest to do it before the button event. If that’s not the case, could you share the error or a link of your project please?