Module 20: Your First Interactive Website
Reading errors
🏠The everyday picture
A car's warning light. It doesn't fix the problem, but it tells you where to look. Ignoring it or covering it up makes things worse.
📘What it really is
- When JavaScript fails, the console shows a red error message with:
- the type of error;
- a description;
-
the file and line number, which you can click to jump to the code.
-
The errors you'll meet most:
- ReferenceError: x is not defined: a name is misspelt, or used outside its scope;
- TypeError: Cannot read properties of null: an element wasn't found (Module 19);
- TypeError: x is not a function: a misspelt function name, or something that isn't a function called
with
(); -
SyntaxError: the code itself is malformed, often a missing bracket or quote. Nothing in that file runs.
-
Read the first error first. Later errors are often caused by it.
- With AI: copy the whole error message, plus the code it points to, into the AI. "It doesn't work" gives the AI nothing to go on; the exact error gives it nearly everything.
🖱️Try it
In main.js, make three deliberate mistakes, one at a time: misspell a variable name, use a wrong selector, and
delete a closing bracket. Each time, reload, read the console error, click through to the line, and fix it.
✅Quick check
The console shows a SyntaxError and none of your interactions work. Why do they all fail?
Show the answer
A syntax error stops the whole file from running, so every feature in it fails.
What should you give an AI when asking for help with an error?
Show the answer
The full error message, the code around the line it names, and what you expected to happen.