Trigger Custom Javascript Function

Using JavaScript with Hype
1

The following way to trigger a custom javascript function works. How can we call the custom function without specifying the presentation name?

Works but not ideal:
<a href="javascript:void(0);" onclick="HYPE.documents['PresentationName'].functions().thisIsACustomFunction();">Click Here</a>

Does not work:
<a href="javascript:void(0);" onclick="hypeDocument.functions().thisIsACustomFunction();">Click Here</a>

This is pseudo-code but ideally, something like this:
<a href="javascript:void(0);" onclick="HYPE.currentDocument.functions().thisIsACustomFunction();">Click Here</a>

Thank you in advance!

3

There’s something wrong with your post – can you make sure you have all your code in place?

4

Hi Daniel, Fixed.

5

If you were making this call within Tumult Hype as a function run in response to an action, you wouldn't need a Document Name set up. Otherwise, you're going to need that for the correct Hype document to receive the function.

Can you share a bit more about what you're trying to do?

7

We’re trying to link HTML text to run a custom function.

We know how to have actions performed on an element using the ‘On Key Press’, ‘On Key Down’, ‘On Key Up’, etc but these actions affect the entire HTML block. We would like different parts of the HTML text trigger different custom functions.

For example,

Aliquam erat volutpat. In et mattis arcu. <a href="javascript:void(0);" onclick="triggerCustomFunction1">Class aptent</a> taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque massa, <a href="javascript:void(0);" onclick="triggerCustomFunction2">fermentum venenatis</a> nisl cursus nec.
8

Here's what works for me...

CutomFunctionFromLink.hype.zip (14.2 KB)

Details

There is a text box containing: "Click Here to trigger the corrsponding function".

In the innerHTML of this textbox the anchor surrounding "Click Here" is given an ID of "textLink01".

The "On Scene Load" handler loads the function "customFunc1" which generates a simple alert:

var whichLink = document.getElementById("textLink01");
	
	whichLink.onclick = function() {
		alert("customFunc1");
	}

Additional Note

You can of course put multiple links into the "customFunc1" function with this set-up.

	var whichLink01 = document.getElementById("textLink01");
	var whichLink02 = document.getElementById("textLink02");
	
	whichLink01.onclick = function() {
		alert("customFunc1");
	}
	
	whichLink02.onclick = function() {
		alert("customFunc2");
	}

Additional Note 2

To tighten things up a bit more skip the variables (though they might be useful for other purposes in the code).

hypeDocument.getElementById("textLink01").onclick = function() {
		alert("customFunc1");
	}
	
hypeDocument.getElementById("textLink02").onclick = function() {
		alert("customFunc2");
	}
5 Likes
9

Hi Jim, That worked perfectly. Thank you!

1 Like