← Back to context

Comment by mkl

11 hours ago

Formatted so I can read it (on mobile...):

  <script>
    let count = $state(0);
    let dialog;
  </script>

  <button
    onclick={() => {
      count++;
      dialog.showModal();
    }}
  >
    :)
  </button>

  <dialog bind:this={dialog}>
    <p>
      Hello, I was clicked {count} times
    </p>
    <form method="dialog">
      <button>Close</button>
    </form>
  </dialog>

The inline onclick handler doesn't seem super readable, but the rest is fine.

I assume for most real world, non-trivial cases you'd be defining the click handler inside the scripts above.