DoRegister not defined bug broke registration button

A missing live‑stats element threw a TypeError, preventing the async doRegister function from loading and disabling the “Get 500 Free Credits” button on the registration page. The issue surfaced on page load and was reported in both the DevTo post and Sentry logs. [DevTo][Sentry]

What happened

The button used an inline onclick attribute: <button onclick="doRegister()">Get 500 Free Credits</button>. The script defining doRegister lived in an inline <script> block. On page load a helper called loadLiveStats tried to write a live service count into two spans. One span (#live-svc-browse) is only injected after registration succeeds, so the helper’s assignment e.textContent = … hit a non‑existent element and threw a TypeError. The exception stopped the script execution, meaning doRegister never got defined. When users clicked the button, the console showed Uncaught ReferenceError: doRegister is not defined and no network request was sent.

Fix

The patch made three concrete changes:

1. Guard every document.getElementById call with if (e) to avoid null dereferences.
2. Re‑invoke loadLiveStats after the success banner injects the missing span.
3. Assign stable IDs (#live-svc‑reg and #live-svc‑browse) to both counters so the helper can target them reliably.

After deployment the header displays a live count on initial load, and the success message updates with the correct number once it appears.

Why it matters

Inline event handlers can silently disappear when a top‑level script crashes, leaving users with dead UI. DOM‑timing bugs like this survive without test coverage because the missing element only appears later in an async flow. Hard‑coded fallbacks (e.g., a static "154 services" label) mask underlying timing issues, preventing live data from ever rendering.

Editor's take

Inline onclick attributes are brittle; a single missing DOM node can cripple an entire user flow. Switching to module‑scoped listeners or framework‑managed handlers surfaces missing functions at build time and lets developers orchestrate DOM updates through lifecycle hooks, reducing the risk of silent failures.