Dynamic variable to function

Hi

Create a function in the scene ShowTable

function ShowTable(hypeDocument, element, event) {

alert(element);

}

create dynamic text link <a href="#" onclick=“ShowTable(‘var1’, ‘var2’, ‘var3’);”>ShowTable</a>
not work

help to pass a variable to a function

ShowTable isn’t globally defined; to access it you need to use the hypeDocument.functions() call, like:

hypeDocument.functions().ShowTable('var1', 'var2', 'var3');

There’s a couple things to note:

  1. If called within HTML code you’d probably need to reference it by HYPE.documents[‘documentName’] where documentName is the name of your exported document
  2. hypeDocument, element, event are the first three arguments. You can theoretically pass any values to these three arguments, but make sure that you know what you’re doing with it as Hype will pass these arguments as expected which might be different than your custom values. If you want to pass additional arguments, see how in this thread.

So your resulting code would probably be something like:

<a href="#" onclick="HYPE.documents['documentName'].ShowTable(null, null, null, 'var1', 'var2', 'var3');">ShowTable</a>

not work %-(

test.hype.zip (16.6 KB)

Please help me. See the attached file example that should work

The first thing is do not use a HTML Widget for this.
Otherwise you will have to jump through many more hoops to get it to work. Use a Text Element

See How to target Elements in a HTML Widget for some understanding.

ShowTable1() & 3 .

 <a href="#" onclick="HYPE.documents['index'].functions().ShowTable1()">ShowTable 1</a>

Read : Linking to a specific scene from inside and outside of a Tumult Hype document


ShowTable2() is in the head so you can simply do:

  <a href="#" onclick="ShowTable2();">Show Table 2</a>. 

But you also have a lower case ’s’ in you onclick. It should be 'S

As for the button that you want to call ShowTable2(); , you would need to either link the button to a function, which defeats the point of having the ShowTable2() function in the head.

Or

  1. Make your own button with an on click
  2. In the Action inspector, link the button to ‘Go To Url’ action and use the URL :

javascript:ShowTable2()

Another thing to note is you will need to write hypdocument in your functions as HYPE.documents[‘index’] for the links to work or place HYPE.documents[‘index’] in the function call in the links for it to be passed to the function.

i.e

<a href="#" onclick="HYPE.documents['index'].functions().ShowTable3(HYPE.documents['index'])">ShowTable 3</a>

hypeDocument.getElementById('result').innerHTML = "ShowTable3() called <p> ";

or

<a href="#" onclick="HYPE.documents['index'].functions().ShowTable3()">ShowTable 3</a>

HYPE.documents['index'].getElementById('result').innerHTML = "ShowTable3() called <p> ";

All shown in example.

On click options 2.hypetemplate.zip (39.3 KB)


1 Like

Updated post above…

Спасибо!

Thank you very much!

Just found this post and it works as a solution for my site, thank you!

I’m confused about the Hype document reference though. Can you help me understand why the document name in the onclick reference has to be ‘index’ for this to work? I thought this was supposed to be a reference to the actual Hype Document Name but it only works with ‘index’ regardless of what my document is named.

UPDATE: Just answered my own question I think. Previewing my site from Hype requires that the document reference be ‘index’ but if I export the site and test it from my hosting location the document reference needs to be named whatever my Hype document name is.

I’m leaving my own answered question up in case anyone else is banging their head against the wall on this.

1 Like