Create a loop to add event listener to go to url html5

[Brandicoot]

Hi,

I have an interactive estate map on a HTML 5 canvas and require some code formatted.

I have 27 buttons on the map that I have named lot50 - lot77

Once the buttons are clicked they need to go the the corresponding web address www.webadress.com/lot-50 if button lot50 is clicked.

Can anyone format the loop add the event listener and create the web function for me as everytime I try is seems to break the output.

Any help appreciated.

[JoãoCésar]

Hi.

One easy way would be to have your buttons named like the pages you want to load.

For example:

lot50 ----- lot50.html

lot51 ----- lot51.html

lot52 ----- lot52.html

Then you can place all buttons inside of a single container and add a single click event listener to the container and get the name of the instance that has been clicked through the target event property. Like this:

// ES6+ syntax

const root = this;

root.changeLocation = e => window.location.href = e.target.name + ".html";

root.buttons.on("click", root.changeLocation);

// ES5 syntax

var root = this;

root.changeLocation = function(e)

{

    window.location.href = e.target.name + ".html";

};

root.buttons.on("click", root.changeLocation);

I hope this helps.

Regards,

JC

[Brandicoot]

Perfect Thanks!

[Brandicoot]

Hi JC,

Has something changed with Animate? When I output the files now the buttons link to https://heritagehills.com.au/null

var root = this;
root.changeLocation = function (e)
{
	parent.window.location.href = "https://heritagehills.com.au/" + e.target.name;
};
root.buttons.on("click", root.changeLocation);

is there an easy way I can add this.name="lotnumber" to each button

Thanks for your help

[JoãoCésar]

Hi.

This is happening because in the previous release of Animate CC the name value given in the Properties panel wasn't being assigned to the instances in the published output.

But it has been fixed in the latest release: version 20.0.1 (build 19255).

Please update your software and it should work.

Regards,

JC

[Brandicoot]

Thanks JC,

I suspected as much. 20.0.1 isnt available yet so have rolled back to 19 and it has resolved the issue.

Many thanks

Drew