Cannot read properties of null
JavaScript Programming Language
Severity: ModerateWhat Does This Error Mean?
This error means you tried to access a property or method on a variable that is null. Null means 'no value' or 'empty on purpose'. JavaScript cannot look up properties on nothing, so it throws this error to tell you the variable is empty.
Affected Models
- All browsers
- Node.js
- Deno
- Any JavaScript runtime
Common Causes
- Trying to use document.getElementById() result before checking if the element was found
- A variable was intentionally set to null and then used without checking
- An API response returned null for a field that your code assumes will always have a value
- A DOM element does not exist yet because the JavaScript ran before the HTML loaded
- A database query or search returned no results, and the empty result is null
How to Fix It
-
Find the variable mentioned in the error. Use console.log() right before the crashing line to print its value.
If the console shows 'null', that confirms the variable is empty at that point.
-
Add a null check before using the variable: if (myElement !== null) { myElement.style.color = 'red'; }
This way, your code only runs when the variable actually has a value.
-
If you are using document.getElementById() or querySelector(), the element might not exist in the HTML. Double-check the element ID or class name for typos.
If the element does not exist, these methods return null — and then accessing .style or .textContent causes this error.
-
If the JavaScript runs before the HTML is fully loaded, move your script tag to the bottom of the page, or wrap your code in a DOMContentLoaded event.
Example: document.addEventListener('DOMContentLoaded', function() { your code here });
-
Use optional chaining (?.) to safely access nested properties without crashing: let color = myElement?.style?.color;
If myElement is null, this returns undefined instead of throwing an error.
When to Call a Professional
This error is fixable without outside help. It is one of the most common JavaScript errors, and every developer encounters it regularly. The fix is always the same: check whether the value is null before using it.
Frequently Asked Questions
What is the difference between null and undefined in JavaScript?
Null means 'empty on purpose' — a developer explicitly set the value to null to indicate no value. Undefined means 'this was never set' — the variable exists but was never given a value. Both will cause 'Cannot read properties of...' errors if you try to access a property on them. The fix is the same for both: check before using.
Why does document.getElementById return null?
It returns null when no element in the HTML has that ID. This usually means one of three things: the ID is misspelled, the HTML element does not exist on this page, or the JavaScript ran before the element was created. Always log the result of getElementById to confirm it found something before using it.
What is optional chaining and should I use it?
Optional chaining (?.) is a modern JavaScript feature that lets you safely access properties without crashing. Instead of myObj.user.name (which crashes if user is null), you write myObj?.user?.name. If any part is null or undefined, JavaScript returns undefined instead of throwing an error. It is widely supported in all modern browsers and is highly recommended.