I am new to Hype (and pretty-much new to Javascript, although I have reasonable general programming experience). I want to detect a click on a radio button as soon as the user clicks it because I want to respond immediately by updating certain values, rather than have them making the selection and then clicking another 'Submit' button.
I have set up radio buttons in a rectangle, but the only OnClick handler I can find is for the rectangle itself, and this gets handled before the radio button selection gets updated. So the reported check value is appropriate for the entry to the handler, rather than the end point when the radio button check is updated to its new value.
I'm sure this is a beginner's question, but any help would be appreciated.
I also would like to have a data entry text box, and detect when the user commits a data change (by pressing tab or Enter). I can set up the text box (not in this sample), but again I don't know how to detect the commit event. It's a different question to the title of this message, but any help on that would also be great. (If it is more appropriate for this forum to submit this as a separate question, let me know and I'll do that.)
I should say that this is all for local processing within the browser, I'm not wanting to upload anything to the server. try radio.zip (20.1 KB)
You are correct that the "On Click" at the Hype element level is not the correct place to add this.
Instead, you will need to add onclick handlers to each of the <input> elements in the Inner HTML.
The trickier part is communicating back to a script that exists in Hype. Random HTML code doesn't specifically know about the Hype document, and this is complicated by the possibility of there being multiple Hype documents on one page. If you know there will only be this one Hype document on the page, then the easiest route for you would probably be to make a little global helper function by editing the Head HTML (via Document Inspector) and add this code:
<script>
function myHypeDocument() {
return Object.values(HYPE.documents)[0];
}
</script>
Then you have access to the Hype API, where you can call a function. Example usage would be something like myHypeDocument().functions().untitledFunction() (though it typically takes arguments for hypeDocument, element, and event).
Finally, you can use this in your Inner HTML with the radio buttons: