All repair missions / Mission 07
Fix this page
Reconnect the button
Repair the HTML target used by a supplied JavaScript listener.
Your goal
The supplied listener looks for #open-notes. Repair the button id, then update the preview and activate the button. The notes should read “Notes are open.” Keep the original button text. The JavaScript is supplied by the workshop, not evaluated from your editor.
Edit a short HTML fragment or CSS rules. Changes apply when you press Update preview or Check my repair. Scripts and external resources are excluded. Fragment links and the supplied landscape image are supported. Edits stay in this page’s memory; reloading starts again.
Your working preview
Read one possible solution
<h2>A tiny interaction</h2><button id="open-notes">Show notes</button><p id="notes">Notes are closed.</p>button { padding: 12px; background: #423025; }A selector that matches no element attaches no listener here because optional chaining stops the call. The workshop installs the shown listener into the restricted preview; arbitrary edited JavaScript is not executed.
Starting code and all hints
<h2>A tiny interaction</h2><button id="show-notes">Show notes</button><p id="notes">Notes are closed.</p>button { padding: 12px; background: #423025; }- The supplied script uses document.querySelector("#open-notes")?.addEventListener("click", () => { document.querySelector("#notes").textContent = "Notes are open."; });
- Compare the selector with the button id.
- Change show-notes to open-notes, update the preview, then click the button.