OnClick Button opens link in new window!

Help & Support
1

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: PlayCanvas | HTML5 Game Engine

2

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");
};
3

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");
};

15%20PM
Screenshot 2019-11-20 at 8.26.15 PM.png1366×768 46 KB

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

4

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
5

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
6

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");
};
7

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");
};