All six exercises / Exercise 04
Find the bug
The script that finds nothing
Match a selector to the element that actually exists.
Observe the evidence
The HTML contains <button id="show-hint">Show hint</button>. The script runs after that markup.
Starting code
const button = document.querySelector("#showHint");
button.addEventListener("click", showHint);Working demonstration
This preview is deliberately broken at first. Its behaviour is contained here.
Give me a hint
The selector is an exact identifier, not a description of the button.
Read the solution and corrected code
const button = document.querySelector("#show-hint");
button.addEventListener("click", showHint);querySelector returns null when no element matches. The next line then tries to call a method on null. The exercise reports that failure without throwing an uncaught error into the lexicon. In your own page, inspect the console and verify the loading order as a separate check.
Make the lesson your own
Replace an id with a class in a local example. Change the selector prefix from # to . and explain the difference.