radio_expt_v6-mpy.html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <title>Radio button expt v6 - 39AndABit 20231118</title>
      <script type="module" src="https://pyscript.net/releases/2023.11.1/core.js"></script>
  </head>
  <body>
    <input name="song" type="radio" id="baby_shark" mpy-change="song_radio_change" checked>
    <label for="baby_shark">Baby Shark</label>
    <br>
    <input name="song" type="radio" id="nggyu" mpy-change="song_radio_change">
    <label for="nggyu">NGGYU</label>
    <br>

    <button mpy-click="announce_favourite">This is definitely my favourite choon</button>

    <div id="output"></div>

    <script type="mpy">
        import sys
        from pyscript import document

        outputElement = document.querySelector("#output")
        outputElement.style["font-family"] = "monospace"
        outputElement.innerText += f"{sys.version=}\n"

        favourite_song_id = "baby_shark"

        def song_radio_change(event):
            global favourite_song_id
            favourite_song_id = event.target.id

        def announce_favourite(event):
            global outputElement
            announce_text = f"Oh yes I really like {favourite_song_id} \u2764\uFE0F\n"
            outputElement.innerText += announce_text
    </script>
  </body>
</html>