Skip to main content
D
drotar
Inspiring
March 26, 2018
Answered

trying to have several invisible buttons going to different pages in html5 animate

  • March 26, 2018
  • 1 reply
  • 766 views

unfortunately, when i script the first button on it's own line  (there are 9 buttons, in all in this animation, please see it on the right side fo the page at http://www.charlesfoxmusic.com)  The animation reads  "INCLUDING" and 9 categories. I want to make each one of those listings (SONG BOOK  TV THEMES  TELEVISION SCORES   FILM SCORES  CONCERT WORKS etc.,)  into buttons that will navigate the viewer when he clicks them to that  web page.

problem  i am getting is how to set this up. i started with the SONG BOOK category. i made an invisible button over it and gave a separate line above the button with this code

this.button_1.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {

  window.open("http://www.thomasdrotardesign.com", "_blank");

}

WORKS PERFECTLY. however, when i go to the second category and do the same thing with the code

this.drotar.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {

  window.open("http://www.nytimes.com", "_blank");

}


WORKS PERFECTLY. HOWEVER, when i click on button_1 (SONG BOOK)  it now takes me to the nytimes.com website, not the thomasdrotardesign.com website. how do i separate these buttons so they can navigate to separate sites without overlapping each other? I've tried everything. your insight would be invaluable.

This topic has been closed for replies.
Correct answer macpawel

Robdillon is right

You have to be more carefull. In your code is mistake. You call fl_ClickToGoToWebPage function which is not defined

In this case you shoul prepare this code like this:

this.button_2.addEventListener("click", fl_ClickToGoToWebPage2);

function fl_ClickToGoToWebPage2() {

     window.open("http://www.nytimes.com", "_blank");

}

and of course set right instance names for button.

Well,

first set names for all instances of buton (eg. buton_1, buton_2, buton_3 ect.)

Then prepare code like this:

this.button_1.addEventListener("click", fl_ClickToGoToWebPage1);

function fl_ClickToGoToWebPage1() {

     window.open("http://www.nytimes.com", "_blank");

}

this.button_2.addEventListener("click", fl_ClickToGoToWebPage2);

function fl_ClickToGoToWebPage2() {

     window.open("http://www.nytimes.com", "_blank");

}

this.button_3.addEventListener("click", fl_ClickToGoToWebPage3);

function fl_ClickToGoToWebPage3() {

     window.open("http://www.nytimes.com", "_blank");

}

Be sure to change url addresses for links

Of course you can use more progamatic code but this is a little bit more difficult

pawel

1 reply

robdillon
robdillon
Participating Frequently
March 26, 2018

The problem is not with overlapping, it is that you are calling the same function with each of the event listeners attached to the buttons. You need to create different functions and refer to each one in the event listener assignments. For instance, fl_ClickToGoToWebPage1 and fl_ClickToGoToWebPage2, etc.

D
drotarAuthor
Inspiring
March 26, 2018

thanks, robdillon but when i do that the buttons no longer work at all.

i tried this earlier as well.

my code for the second button

this.button_2.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage2() {

    window.open("http://www.nytimes.com", "_blank");

}

when i click on the button once i add the 2 the button no longer functions.

macpawel
macpawelCorrect answer
Participating Frequently
March 26, 2018

Robdillon is right

You have to be more carefull. In your code is mistake. You call fl_ClickToGoToWebPage function which is not defined

In this case you shoul prepare this code like this:

this.button_2.addEventListener("click", fl_ClickToGoToWebPage2);

function fl_ClickToGoToWebPage2() {

     window.open("http://www.nytimes.com", "_blank");

}

and of course set right instance names for button.

Well,

first set names for all instances of buton (eg. buton_1, buton_2, buton_3 ect.)

Then prepare code like this:

this.button_1.addEventListener("click", fl_ClickToGoToWebPage1);

function fl_ClickToGoToWebPage1() {

     window.open("http://www.nytimes.com", "_blank");

}

this.button_2.addEventListener("click", fl_ClickToGoToWebPage2);

function fl_ClickToGoToWebPage2() {

     window.open("http://www.nytimes.com", "_blank");

}

this.button_3.addEventListener("click", fl_ClickToGoToWebPage3);

function fl_ClickToGoToWebPage3() {

     window.open("http://www.nytimes.com", "_blank");

}

Be sure to change url addresses for links

Of course you can use more progamatic code but this is a little bit more difficult

pawel

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices