JavaScript errors appear in the browser console, not on the page. If a page silently does nothing, open DevTools (F12) and look at the Console tab first — the answer is usually sitting there in red.
Cannot read properties of undefined (reading ‘x’)#
TypeError: Cannot read properties of undefined (reading 'name')By far the most common. You reached into something that turned out to be undefined.
const user = {};
console.log(user.address.city); // address is undefined
console.log(user.address?.city); // undefined, no crash
console.log(user.address?.city ?? "n/a"); // with a fallbackRead the message carefully: it tells you which property you were trying to read, which points at the object that was empty.
x is not a function#
TypeError: items.map is not a functionThe value is not the type you assumed. map exists on arrays; if items is an object, a NodeList or undefined, it will not.
const nodes = document.querySelectorAll(".card");
nodes.map(n => n.textContent); // NodeList has no map
[...nodes].map(n => n.textContent); // convert to an array firstx is not defined#
ReferenceError: total is not definedA typo, a missing declaration, or a variable used outside the block it was declared in. Remember let and const only exist inside their braces.
Cannot access ‘x’ before initialization#
console.log(count); // ReferenceError
let count = 5;Move the declaration above the first use. Function declarations are hoisted, but let and const are not usable before their line.
Unexpected token#
SyntaxError: Unexpected token '}'Something is unbalanced — a missing bracket, brace or comma. Your editor’s bracket highlighting will find it faster than reading will. A formatter such as Prettier prevents most of these outright.
A special case: Unexpected token '<' ... is not valid JSON means the server sent an HTML error page and your code tried to parse it as JSON. Log await response.text() to see what actually arrived.
Cannot set properties of null#
TypeError: Cannot set properties of null (setting 'textContent')querySelector found nothing and returned null. Two causes:
- The script ran before the element existed — add
deferto the script tag, or move it to the end of the body - The selector is wrong —
"#title"for an id,".title"for a class,"title"for a tag
const el = document.querySelector("#title");
if (!el) {
console.warn("No #title on this page");
return;
}
el.textContent = "Hello";NaN appearing in your maths#
const age = document.querySelector("#age").value; // "abc"
console.log(age * 2); // NaNNaN means “not a number”. It spreads: any calculation involving it also becomes NaN. Validate before converting:
const value = Number(input.value);
if (Number.isNaN(value)) {
console.log("Please enter a number");
}CORS blocked#
Access to fetch at '...' has been blocked by CORS policyA browser security rule, not a bug in your code. The other server has not said your site may read its responses. You cannot fix it from the front end — use an API that allows browser requests, or make the call from your own server. See the Fetch API guide.
Questions people ask#
Why is nothing showing in the console?
Check the filter box and the level selector — errors may be hidden. Also confirm your script is actually loading: look at the Network tab for a 404 on the file.
The error mentions a file I did not write
The error came from a library, but the cause is usually the data you passed in. Look further down the stack trace for the first line that is your code.
My code works in the console but not in the file
Usually a timing problem: the file runs before the elements exist. Add defer to your script tag.