storing URL's for several SVG buttons with tweenMax rollovers

[Liam@II]

Hi

 

im lookin for some help. i guess this is a JS question and not strictly a GSAP question but hopefully someone can help.

 

var buttons = document.getElementsByClassName("click");

var myFunction1 = function() {
 TweenMax.to(this, 0.8, {scale:1.1, ease: Elastic.easeOut.config(1, 0.2)});
};

var myFunction2 = function() {
 TweenMax.to(this, 1, {scale:1, ease: Elastic.easeOut.config(1, 0.2)});
};

var myFunction3 = function(url) {
  var win = window.open(url, '_blank');
};


for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('mouseover', myFunction1, false);
    buttons[i].addEventListener('mouseout', myFunction2, false);
    buttons[i].addEventListener('click', myFunction3, false);
}

here i create an array (is it actually an array?) or buttons based on the class of .click and i assign 3 event listeners to eacb button.  

id like to pass in a URL for each button to myFunction3.

 

where would i store these URLs?

would i need to lose the code i have and create new code where i create a button object?

 

thanks and i appreciate any help you can offer

 

See the Pen e5271590a2b526a935a597ce988f36e8 by Liamii (@Liamii) on CodePen

[GreenSock]

Technically I think it's a NodeList (not an Array) that's returned by getElementsByClassName(), but it acts a lot like an Array. 

 

You certainly could handle this all directly in JavaScript, but if it were me I'd put the URL data directly in the HTML so that it's very clearly associated with the nodes there (easier to map mentally, and avoids potential errors due to the order things are returned by your selector). So I'd simply add a data-url attribute to each one like:

<g id="cashRegister_Icon" class="icon click" data-url="http://greensock.com">

and then access it in your handler like:

this.getAttribute("data-url")

Does that help?

[Liam@II]

il certainly give it a try! and il let you know how i get on

 

 

update:

 

that worked a treat!

 

thank you