Borislav Hadzhiev
Last updated: Jul 25, 2022
Check out my new book
There are 2 main reasons the "Cannot read property 'value' of null" error occurs:
value
property on a null
value (DOM element that doesn't
exist).Here is an example of how the error occurs.
const el = null; // ⛔️ Cannot read properties of null (reading 'value') console.log(el.value);
The error most commonly occurs if you use the getElementById()
method and pass
it an id
that is not present in the DOM.
const input = document.getElementById('does-not-exist'); console.log(input); // 👉️ null // ⛔️ Cannot read properties null (reading 'value') const value = input.value;
To solve the "Cannot read property 'value' of null" error, make sure you
aren't accessing the value
property on a null
value, e.g. a non-existent DOM
element.
An element with the provided id
does not exist in the DOM, so the
getElementById
method returns null
. When we try to access the value
property on a null
value we get the error.
You can use the optional chaining (?.) operator, a ternary operator or a simple
if
statement to avoid the error.
const input = document.getElementById('does-not-exist'); // ✅ Using optional chaining ?. const value1 = input?.value || ''; // ✅ Using ternary operator const value2 = input ? input.value : ''; // ✅ using if/else if (input) { const value3 = input.value; } else { console.log('input is falsy'); }
To solve the "Cannot read property 'value' of null" error, make sure that the JS script tag is placed at the bottom of the body, after the DOM elements have been declared.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ⛔️ BAD - Script is ran before input is created ⛔️ --> <script src="index.js"></script> <input id="first_name" type="text" name="first_name" value="Initial Value" /> </body> </html>
We placed the JS script tag above the code that creates the input
element, so
the index.js
file is ran before the DOM element is created.
This means that the input
will not be accessible in the index.js
file.
const input = document.getElementById('first_name'); console.log(input); // 👉️ null // ⛔️ Cannot read properties null (reading 'value') const value = input.value;
You have to move the JS script tag to the bottom of the body, after the HTML elements.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input id="first_name" type="text" name="first_name" value="Initial Value" /> <!-- ✅ GOOD - Script is ran after input is declared ✅ --> <script src="index.js"></script> </body> </html>
Now the input
element is available in the index.js
file.
const input = document.getElementById('first_name'); console.log(input); // 👉️ input#first_name // ✅ Works const value = input.value; console.log(value); // 👉️ "Initial value"
Now that the HTML element is created before the index.js
script is ran, we are
able to access the input
element.
The "Cannot read property 'value' of null" error occurs when:
value
property on a null
value, e.g. after calling
getElementById
with an invalid identifier