Determining a button press in JavaScript

Using JavaScript with Hype
1

Greetings Jonathan,
Query I have a menu with two options, I need to recognize the button that was pressed in a JavaScript function.
Could you help me please?

2

It is pretty dependent on the setup. I'd recommend posting a zip of your current .hype document so we can see what you're doing.

If you're just looking to invoke Hype runtime from a button press, you can generally use the Hype API to invoke functions via the global HYPE object. It might look something like:

<button onclick="Object.values(HYPE.documents)[0].startTimelineNamed('Main Timeline')">start main timeline</button>

Otherwise if you need to do something like detect which button was pressed from common code, you can assign a Unique Element ID, Class Name, or Additional HTML Attribute to the element, and then conditionally check to see which that was in the Hype callback function:

if(element.id == "buttonA") {
    // ...  do stuff for button A
} else if(element.id == "buttonB") {
    // ...  do stuff for button B
}
1 Like
3

Excellent that was what I was looking for, thank you very much. :grin:

1 Like
4

These templates might help too...

https://photics.com/free-template-tuesday-22-tumult-hype-menu/

https://photics.com/free-template-tuesday-24-tumult-hype-clicky/

https://photics.com/free-template-tuesday-31-tumult-hype-navigating/

It sounds like template #22 "Menu" is close to what you're looking for. By giving the button elements proper IDs, the clicking can be dynamic.

if (hypeDocument.currentSceneName() != element.id) {

	x = element.id.replace("Scene ", "");
	s = hypeDocument.currentSceneName().replace("Scene ", "");
	
	if (x > s) {
		hypeDocument.showSceneNamed(element.id, hypeDocument.kSceneTransitionPushRightToLeft, 0.5);
	} else {
		hypeDocument.showSceneNamed(element.id, hypeDocument.kSceneTransitionPushLeftToRight, 0.5);
	}
	
}

The scenes are numbered... Scene 0... Scene 1... Scene 2... and... Scene 3. The script removes the text from the names, leaving only the numbers. The scene moves either left or right, by comparing the target scene number (x) with the current scene number (s). That way, the scene transition can feel more natural... as if you're building a virtual world.

3 Likes