ps-blitz-script 0.4.6

JavaScript execution for Blitz using the Boa engine
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!--
  A checkbox whose state is written from script, which is what a controlled
  component does on its first render and on every render after.

  `checked` is an HTML boolean attribute, so a written `false` reflected into it
  reads as *checked*. The heading names what the control actually reports.
-->
<html>
  <body>
    <h1>Controlled checkbox</h1>

    <input type="checkbox" id="controlled" aria-label="Controlled">
    <div id="out"></div>

    <script>
      const box = document.getElementById("controlled");
      const out = document.getElementById("out");
      const show = () => {
        out.textContent = "";
        const heading = document.createElement("h2");
        heading.textContent = "Reports " + (box.checked ? "on" : "off");
        out.appendChild(heading);
      };

      // The initial render of a control bound to `false`.
      box.checked = false;
      show();
      box.addEventListener("change", show);
    </script>
  </body>
</html>