1 button, 3 clicks, 3 different functions using vanilla Javascript (REVISED)(Unsolved)

Using JavaScript with Hype
1

I have a 32 buttons in a scene. I don't want to create 32 different timelines or a separate function for each button.

On each button, I would like to do the following:

Starting color is black and opacity is at 100%.

First click = change background color (red) & opacity to 70%
Second click = change background color (green) & keep opacity to 70%
Third click = change background color and opacity back to original setting.

Can this be done?

Please bear in mind that I am quite a novice at this but very determined to learn.

Thank you.

2 
function refreshElementState(element, animstate){

    const animStates = {

        "1" : "green",

        "2" : 0.5,

        "3" : "test"

        }

        switch(animstate){

            case "1" : element.style.color = animStates[animstate]; element.dataset.animstate = "2"; break

            case "2" : hypeDocument.setElementProperty(element, "opacity", animStates[animstate]);  element.dataset.animstate = "3"; break

            default : element.innerHTML = animStates[animstate]; 

        }

}

if(!element.dataset.animstate){

    element.dataset.animstate = "1";

}

refreshElementState(element, element.dataset.animstate)

not tested

3

Thank you, Hans. I'm quite a novice at javascript, so I'm ignorant of the things that are happening in this solution. So do I need an event listener and/or a click counter?

4

add onclick for each element and attach the scripttest.hype.zip (12.9 KB)

5

Excellent! Thank you!!

After clicking through the states, how does it reset back to the original state?

Also, what if I wanted to change the color and the opacity in states 1 & 2?

6

you've got to change those ...

/////

this was not part of the request :slight_smile:

of course it's easily possible, but i suspect it' lead to further request.

please be sure of what you expect to do and then start a request ... so it's complete ...

1 Like
7

Thanks again! You've been helpful!

8

dear @jabling,

modifying your opening request to be a very different request than the initial one will mislead other visitors coming to the thread as they won't understand the answers. This procedure would probably also not lead to some more attention, cause this update is not necessarily visual in the forums hierarchy.

I'd advise to post the new/modified request in a new reply and optinally change the first post to its initial state ...

best weekend :slight_smile:

9

so changed it to:

first click:

  • cache initial-color and opacity.
  • set color to red. opacity 0.7

second click:

  • set color to green. opacity 0.7

third click:

  • set color and opacity to init values

  • reset settings to startsettings

    function refreshElementState(element, animstate) {

      const animStates = {

      "1": ["red", 0.7],

      "2": ["green", 0.7]

  }

  ////////////////////
  function setElementState(element, color, opacity) {
      element.style.setProperty("background-color", color, "important");
      hypeDocument.setElementProperty(element, "opacity", opacity);
  }

  ///////////////////////
  switch (animstate) {

      case "1":
          setElementState(element, animStates[animstate][0], animStates[animstate][1])
          element.dataset.animstate = "2";
          break

      case "2":
          setElementState(element, animStates[animstate][0], animStates[animstate][1])
          element.dataset.animstate = "3";
          break

      default:
          setElementState(element, element.dataset.defaultColor, element.dataset.defaultOpacity)
          element.removeAttribute('data-animstate');


  }

    }
    ////////////////
    if (!element.dataset.animstate) {

      element.dataset.animstate = "1";
  element.dataset.defaultColor = element.style.getPropertyValue("background-color");
  element.dataset.defaultOpacity = hypeDocument.getElementProperty(element, "opacity");

    }

    refreshElementState(element, element.dataset.animstate);

test.hype 2.zip (14.3 KB)

4 Likes
10

Thank you!!! This is perfect!