Change an elements colour from text


(Chris Hardy) #1

Hi all,

I’m wondering if it’s possible to change an elements color from text set in ‘text element’. I’m exploring if it’s possible for a text element to show a number and change a simple box element to the related color - for example:

The number 1 will make the box turn green
The number 2 will make the box turn red
The number 3 will make the box turn yellow

Does anyone have an idea if this is possible using JavaScript?

Thanks In advance,

Chris

PS - to the guys at Tumult - hype is excellent and thank you for all your hard work in continuously making it better :blush:


#2

not sure if I’ve got this 100% but you can use this function on mouse click of the text element(s)

var targetElement = hypeDocument.getElementById("box");
if(element.innerHTML === "1"){ // element is the shape being clicked
    targetElement.style.backgroundColor = "green"; // or #00ff00 or rgb(0, 255, 0);
} else if (element.innerHTML === "2"){
    targetElement.style.backgroundColor = "red"; // or #ff0000 or rgb(255, 0, 0);
} else if (element.innerHTML === "3"){
    targetElement.style.backgroundColor = "yellow"; // or #ffff00 or rgb(255, 255, 0);
}

the “element” (text element clicked) can also have an ID instead of using the innerHTML

// then you would target as
if(element.id === "1"){ .... etc

(Pete) #3

As an alternative to @DBear javascript solution you have an option of creating different timelines and animating their states. You can also make 3 individual scenes depending on what you want to achieve and what is comfortable for you.

Timeline Examples
https://tumult.com/hype/gallery/IconicStructures/IconicStructures.hype.zip
https://tumult.com/hype/gallery/EmailSwipe/EmailSwipe.hype.zip


(Chris Hardy) #4

Thanks guys :blush: