Premier League Predictor: Astro — Chapter 4, Exercise 3
====================================================

TASK
Build the full click-to-pair page yourself against a real season and
gameweek, enter all 10 fixtures for a gameweek, then explain what
would actually happen if the Clear and Add Fixture buttons used
inline onclick attributes instead of addEventListener, given how
Astro processes this script by default.

SOLUTION

Steps to complete the hands-on part:

1. Using the routes from Chapters 3 and 4, create a season, add 20
   teams to it, and create gameweek 1.
2. Build src/pages/admin/fixtures.astro exactly as shown in the
   chapter, pointed at the real season and gameweek IDs just created.
3. Visit the page, click through 10 pairs of teams, clicking "Add
   Fixture" after each pair, until every one of the 20 teams has been
   used exactly once.
4. Confirm GET /api/gameweeks/{gameweekId}/fixtures now returns all
   10 fixtures.

Written explanation:

A plain <script> tag with no extra attributes, written directly
inside an Astro page, is automatically processed by Astro: bundled,
converted into a real ES module, and deduplicated. A genuine, real
consequence of that processing is that every function declared at the
top level of the script — clearSelection, addFixture, selectTeam, and
so on — is scoped to that module only. It is never attached to the
global window object the way a function in an ordinary, unprocessed
<script> tag would be.

If the Clear and Add Fixture buttons were written as
<button onclick="clearSelection()"> instead of using
addEventListener, clicking either button would do nothing at all,
and the browser's own developer console would show a real error along
the lines of "clearSelection is not defined." The inline onclick
attribute is evaluated by the browser as plain, non-module global
JavaScript, and it looks for a function named clearSelection sitting
on window — but the module-scoped version declared inside the
processed script was never placed there.

This is exactly why every interactive element in this chapter is
wired up with a real addEventListener call instead: it works
regardless of whether the function it calls was ever exposed
globally, since it operates directly on the already-in-scope function
reference rather than looking it up by name from the global object.

WHY THIS WORKS AS AN ANSWER
----------------------------
It completes the real, hands-on build-and-verify task, then correctly
identifies the actual mechanism behind the gotcha (module scoping
under Astro's default script processing) and states precisely what a
reader would actually observe (a silent no-op click plus a real
console error) rather than only asserting that "onclick doesn't
work."