OnClick Button opens link in new window!

Ok so this is what I have so far…

var ReportSystem = pc.createScript('reportsystem');


//defines the reportsystem to be embedded in//

var ReportSystem = this.entity;

ReportSystem.prototype.intalize = function() {
    var rs = this.entity.findByName('rsBTN');
      this.element.on('mouseenter', this.onEnter, this);  

};

I’m trying to make it so tht on click of the button, it opens up the link in a new window

Heres the ediotr link: https://playcanvas.com/editor/code/624824?tabs=25164720,20880378,23084532

You need to do a couple of things to get this working:

  • attach your ReportSystem.js script to an entity, so it gets executed.
  • avoid declaring a second time the ReportSystem variable
  • rename intalize to initialize
  • add an onEnter method to your script and in there call the window.open method to open the new window.

Something like this, not tested but it will give you an idea:

var ReportSystem = pc.createScript('reportsystem');

ReportSystem.prototype.initialize = function() {
    var rs = this.entity.findByName('rsBTN');
    rs.element.on('mouseenter', this.onEnter, this);
};

ReportSystem.prototype.onEnter = function() {
    window.open("https://docs.google.com/forms/d/e/1FAIpQLScI9j-sV2hwUtxk79KCK7WWqAX14eavWB1uWd2HfnHMQEwnmA/viewform?usp=sf_link");
};

ok so I tweaked some stuff but I got to the attributes it keeps saying not defined???

var ReportSystem = pc.createScript('reportsystem');

ReportSystem.attributes.add(ENtityS, {type:'entity'});

ReportSystem.prototype.initialize = function() {
    var rs = this.entity.findByName('rsBTN');
    rs.element.on('mouseenter', this.onEnter, this);
};

ReportSystem.prototype.onEnter = function() {
    window.open("https://docs.google.com/forms/d/e/1FAIpQLScI9j-sV2hwUtxk79KCK7WWqAX14eavWB1uWd2HfnHMQEwnmA/viewform?usp=sf_link");
};

Here’s the editor link:https://playcanvas.com/editor/code/624824?tabs=25164720&line=3&col=29&error=true

That’s because you’re using (almost) the wrong syntax for adding attributes.
The correct syntax is

ReportSystem.attributes.add('variableName', {type: 'entity'});

First part is your script name, then attributes.add, then you pass in a String that you will refer to your entity as. Then you also pass in the type, which you’ve done correctly.

1 Like

Lets goo the code worked I tweaked it to my fitting here’s the code:

var ReportSystem = pc.createScript('reportsystem');

ReportSystem.attributes.add('entity',{type:'entity'});




ReportSystem.prototype.initialize = function() {
    var rs = this.entity.findByName('rsBTN');
    rs.element.on('mouseenter', this.onEnter, this);
};

ReportSystem.prototype.onEnter = function() {
    window.open("https://docs.google.com/forms/d/e/1FAIpQLScI9j-sV2hwUtxk79KCK7WWqAX14eavWB1uWd2HfnHMQEwnmA/viewform?usp=sf_link");
    console.log("link opened");
};

Now I just gotta change the url to the report page.

1 Like

But is there a way to make it so that when the button is clicked it goess to the url.
Maybe something like this:

var ReportSystem = pc.createScript('reportsystem');

ReportSystem.attributes.add('entity',{type:'entity'});




ReportSystem.prototype.initialize = function() {
    var rs = this.entity.findByName('rsBTN');
    rs.element.on('mouseenter', this.onClick, this);
};

ReportSystem.prototype.onClick = function() {
    window.open("https://docs.google.com/forms/d/e/1FAIpQLScI9j-sV2hwUtxk79KCK7WWqAX14eavWB1uWd2HfnHMQEwnmA/viewform?usp=sf_link");
    console.log("link opened");
};

Yes sure, just update your event handler from mouseenter to mouseup:

var ReportSystem = pc.createScript('reportsystem');

ReportSystem.attributes.add('entity',{type:'entity'});

ReportSystem.prototype.initialize = function() {
    var rs = this.entity.findByName('rsBTN');
    rs.element.on('mouseup', this.onClick, this);
};

ReportSystem.prototype.onClick = function() {
    window.open("https://docs.google.com/forms/d/e/1FAIpQLScI9j-sV2hwUtxk79KCK7WWqAX14eavWB1uWd2HfnHMQEwnmA/viewform?usp=sf_link");
    console.log("link opened");
};