Having multiple click events on same button

[amer...@gmail.com]

I'm using GWD to make a click-through animation. What I want is for a new piece of text to appear each time a person clicks anywhere on the page, so that they can 'click through' the text at their own pace.

is this possible? I imagine it would require making a transparent button that covers the whole page, but how do I get it to respond sequentially to the first click, then second click, etc?

[Kent Myers]

You could do this by creating a custom action for your click event on your button.

Using Add Custom Action from the Events panel you could enter custom javascript which would keep track of number of clicks and display correct info.

Essentially it would be custom code written in Javascript.

Hope that helps,

Kent

Google Web Designer team 

[amer...@gmail.com]

Thanks for your response. It sounds like I'd need two snippets of code then, one that counts the clicks and one that says what to do with each click. Would both of these bits of code go in the same event?

[Kent Myers]

Yes all on one event, and you should be able to do it in one function. The rough idea is:

myCustomClickEvent {

  clickCount = clickCount+1;

  if (clickCount == 1) { message1.style.visibility = visible; }

  else if (clickCount == 2) { message2.style.visibility = visible; }

  else if (clickCount == 3) { message3.style.visibility = visible; }

}

You would initialize elsewhere, like when the page loads and before any clicks are registered:

  var clickCount = 0 

  var message1 = document.querySelector('#message1);

  var message2 = document.querySelector('#message2);

  etc..

And ensure your messages have the ids set to match above, for example: "message1", etc.

You may also have to turn off other messages to avoid having more than one appear at a time.

Hopefully this gets you started.

[amer...@gmail.com]

This is very helpful, thank you! For declaring the variables initially, is there a component I can do that through in the design view interface, or I need to put them directly into the code?

[Kent Myers]

Deselect everything then add a new event, it will automatically be on the page1 element, then in the Events panel you can select events like "Page loaded".

Here's a working sample: https://drive.google.com/open?id=0B4-5LzyLi85VMWFKSTg4NGRCWVU

Click the button multiple times to see message1, 2 & 3 become visible.

Hope that helps,

[amer...@gmail.com]

My goodness this is so helpful, thank you! I really appreciate your time and effort, much more help than I was expecting to get and I've got it working now! Thanks again :D