Target elements within hype scene from a HTML widget in that scene

Using JavaScript with Hype
1

Hi

I have a very weird scenario in which there is a HTML widget in my scene with a manually added button. I need to be able to hide an element in the scene (a rectangle in this case) by clicking the button inside the widget. However, I need to be able to do it with an event listener attached to that button (see buttons inner html)

I tried this and that posts but still struggling.

Any help would be greatly appreciated.

HTML_widget.hype.zip (27.9 KB)

Thanks

Greg

2

Hi Greg,

try this…

document.querySelector("#hide-btn").addEventListener("click", function () {

var hypeDoc = parent.HYPE.documents[Object.keys(parent.HYPE.documents)[0]];

hypeDoc.getElementById("rectangle").style.display = "none";

});

HTML_widget_kt.hype.zip (24.9 KB)

1 Like
3

WOW! Thanks for that! Works like a charm.

Syntax is a little complicated so I’m trying to understand what is going on. When you declared the hypeDoc variable, what does the “Object.keys” refer to and why is the ‘parent.HYPE.documents’ repeated?

Any pointers would be greatly appreciated.

Thanks!