HPAI · Finished editorial example

The broken form and the smallest fix

Try both real HTML files. The broken copy deliberately fails while attaching its submit handler. The fixed copy changes the selector from #books-form to #book-form. It is a small in-memory demo, not the full persistent app.

Open the deliberate bugOpen the working fix

The exact change

- document.querySelector('#books-form')
+ document.querySelector('#book-form')

Reproduction

  1. Open broken.html and inspect the browser Console: the selected form is null.
  2. Open fixed.html, enter a title and press Add book.
  3. Try blank input and a second title. Existing titles remain visible.

Read the actual Node verification record. It checks the scripts with a simulated DOM; it does not claim a browser screenshot or keyboard run.