How to make an text-object visible when you click on a button and vice-versa

Using JavaScript with Hype
1

Hi, my javascript is more than a little rusty and i have to set up a problem -
here’s my problem,
i’ve a button (lets call it btn1) and a text object (lets call it txt1) and now the following should happened

the button is always visible and at start the text object is invisible (opacity 0 %) or visible (opacity 100%). at start the opacity is 0 % !!
when you click on the button, the opacity of txt is looked for and changed either to 0 or to 100 % depending on the actual value.

I’ve managed to do some with changing scenes but as i have 30 of those textfield on one scene that way to complicated !!

could you help me
Kind reagrds

2

choose a timeline “timelineName” and record visibilty from 0% to 100%.
on buttonClick say “start “timelineName””

3

Thanks for the tip, but this doesn’t solve my problem because i’ve to do this for a lot of buttons and textfields
and i’ve to do this individually for all buttons and related textfields

i’ve put up the trail version here
https://dl.dropboxusercontent.com/spa/muoc5nbi7vtp7au/Exports/bam_buttons/bam_buttons.html

the thing is if you click on the red button below the tree then the corresponding textfield in the tree should be toggle between visible and not visible and this for a lot of textfield i’ve to put on the image

4

You would have to give all the elements a class name if you wanted to use javascript. You could use strmiska’s method and use the key combo of “Command + Click” to select the needed elements and set the timeline for all the selected items.

5

Hi
i tried this
i created a function that on a click on the button should toggle the display of the text field

but it does only the first part
what’s wrong

function toggle(hypeDocument,element,event) {

	if (hypeDocument.getElementById("Text1").style.display = "none") {hypeDocument.getElementById("Text1").style.display = "block"} else 		{hypeDocument.getElementById("Text1").style.display = "none"} ;

}

it does only the first

6

FOUND the error ( OMG, i’m really getting rusty)
ffunction toggle(hypeDocument,element,event) {

if (hypeDocument.getElementById("Text1").style.display **==** "none") {hypeDocument.getElementById("Text1").style.display = "block"} else 		{hypeDocument.getElementById("Text1").style.display = "none"} ;

}

2 Likes
7

You beat me to it. YAY!

8

You can do that also using:

var textDisplay = hypeDocument.getElementById("Text1");
textDisplay.style.display = ((textDisplay.style.display == "none" ) ? "block" : "none");

Just looks nicer to me :smiley:

3 Likes