Detect click on radio button

Using JavaScript with Hype
2

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:

<p>Select one of the following</p>
<p>
  <input type="radio" name="ion" id="K" checked="true" onclick="myHypeDocument().functions().untitledFunction(myHypeDocument(), this, window.event)"> K⁺<br>
  <input type="radio" name="ion" id="Ca" onclick="myHypeDocument().functions().untitledFunction(myHypeDocument(), this, window.event)"> Ca⁺⁺<br>
  <input type="radio" name="ion" id="Cl" onclick="myHypeDocument().functions().untitledFunction(myHypeDocument(), this, window.event)"> Cl⁻
</p>
2 Likes