Borislav Hadzhiev
Sat Oct 23 2021·3 min read
Photo by Matthew Pablico
There are 3 main reasons the "Cannot read property of null" error occurs:
null
value.The error occurs if you try to access a property on a variable that stores a
null
value.
const example = null; // ⛔️ Cannot read properties of null (reading 'value') example.value;
To solve the "Cannot read property of null" error, use the optional chaining
(?.) operator, e.g. obj?.address?.street
. If the reference is nullish, the
optional chaining operator will short-circuit instead of throwing an error.
const example = null; // ✅ Using optional chaining console.log(example?.value); // 👉️ undefined console.log(example?.value?.moreNested); // 👉️ undefined // ✅ Using logical AND (&&) operator console.log(example && example.value); // 👉️ null // ✅ Using if / else if (example?.value) { console.log(example.value); } else { // 👇️ this runs console.log('example.value not found'); }
The first example shows how to use the optional chaining (?.) operator.
The operator allows us to access a property of an object without having to check if the reference is valid.
undefined
if the reference is equal to null
or undefined
.The second example uses the logical AND (&&) operator.
If the value to the left of the operator is falsy (e.g. null
), it doesn't
evaluate the expression to the right, which prevents an error from being thrown.
if
statement that uses the optional chaining (?.) operator. Use this approach if you need to handle what happens if the property is null
or undefined
.To solve the "Cannot read property of null" error, make sure that the DOM
element you are accessing exists. The error is often thrown when trying to
access a property after using the getElementById()
method and passing it a
non-existent id.
const el = document.getElementById('does-not-exist'); console.log(el); // null // ⛔️ Cannot read properties of null (reading 'value') console.log(el.value);
Make sure you're accessing the correct DOM element and add a conditional check to be certain the element is found, before accessing its properties.
const el = document.getElementById('not-exist'); console.log(el); // null // ⛔️ Cannot read properties of null (reading 'value') if (el?.value) { console.log(el.value); } else { // 👇️ this runs console.log('element does not exist'); }
If the el
variable stores a value of null
or undefined
, we don't get an
error, instead it short-circuits returning undefined
and our else
block
runs.
To solve the "Cannot read property of null" error, make sure to insert the JS script tag at the bottom of the body. The JS script tag should be placed after the HTML elements have been declared.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <script src="index.js"></script> <!-- ⛔️ BAD - SHOULD BE ABOVE SCRIPT TAG ⛔️ --> <input id="first_name" value="John" /> </body> </html>
If you now try to get the input
element in the index.js
script, you will get
an error because the script runs before the input
element has been declared.
const el = document.getElementById('first_name'); console.log(el); // 👉️ null // ⛔️ Cannot read properties of null (reading 'value') console.log(el.value);
You have to move the JS script to the bottom of the body, after the HTML elements have been declared.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ✅️ GOOD - HTML elements above JS script ✅️ --> <input id="first_name" value="John" /> <script src="index.js"></script> </body> </html>
Now you can access the input
element in your index.js
script.
const el = document.getElementById('first_name'); console.log(el); // ✅ works console.log(el.value); // 👉️ "John"
The "Cannot read property of null" error occurs when trying to access a property
on a null
value.
Variables that store a value of null
are often returned from methods such as
getElementById()
, when the element does not exist in the DOM.