Hi,
I am building a project in Tumult Hype. I managed to get it working using an HTML Widget, but I am struggling to organize the code when separating HTML, CSS, and JavaScript.
I am not sure whether certain scripts should go in On Scene Load, On Mouse Click, or be linked through Element IDs. I am sharing both the working HTML Widget version and the separated version of the project.
Any guidance would be greatly appreciated.
Evaluation-Widget_&_Separately.zip (87.2 KB)
I think there's a few items that might help point you in getting this working how you want:
First, I just recommend looking at the developer console logs, as this will give some logs onto what is failing. You can also use the "Sources" panel in Safari to setup a breakpoint for all exceptions to see where there is a failure specifically.
When you make a function via the Hype's interface, the function isn't declared in the global namespace. Therefore if you make a hype function of renderizarTabla you can't just call it like renderizarTabla() elsewhere in the code. So your options are to either get at the hypeDocument object and call it from the functions() API like: Object.values(HYPE.documents)[0].functions().renderizarTabla() ~OR~ since your code doesn't really use any HYPE constructs, it is probably just easier to put the renderizarTabla function itself in the Head HTML in a <script> tag. Then it will be in the global namespace.
If you declare variables inside the inner html of a rectangle/div, those won't be available in time to any scripts in your head HTML, so you should probably also move those to the top of your head html.
The window.onload is likely too early as hype hasn't yet setup the entire scene. The code here can be moved to an on scene load handler.
For on click functions, you need to be aware that the function signature is different -- the seleccionar() function you originally had expects boton in the argument but that's not passed in via the on click handler.