Skip to main content

How to Resolve the "TypeError: Cannot read properties of null (reading 'value')" Error in JavaScript

The TypeError: Cannot read properties of null (reading 'value') is one of the most common errors in client-side JavaScript. It occurs when you try to access the .value property of a variable that holds null instead of the expected DOM element. This almost always means your attempt to select an element from the DOM has failed.

This guide will explain the two primary reasons why your element selector might be returning null and show you how to write robust code that prevents this error.

The Core Problem: Your Element Selector Returned null​

The error message is very specific. It's telling you that you are trying to do null.value, which is an invalid operation.

This happens because the line of code before the error was supposed to find a DOM element and assign it to a variable. When a selector method like document.getElementById() or document.querySelector() fails to find a matching element, it returns null.

Example of problem:

// Problem: We try to get an element, but the selector fails.
const myInput = document.getElementById('non-existent-id');

// At this point, `myInput` is `null`.
console.log(myInput); // Output: null

// The error happens when we try to use the `null` variable.
const inputValue = myInput.value;

Error Output:

Uncaught TypeError: Cannot read properties of null (reading 'value')
note

The solution is to figure out why the element was not found.

Cause 1 (Most Common): Incorrect Selector or ID​

This is a simple typo. The ID, class name, or CSS selector you are using to find the element does not match any element in your HTML.

  • Is there a typo in the ID? ('frist_name' instead of 'first_name')
  • Are you using getElementById with a class name? (e.g., getElementById('.my-class') - this is incorrect).
  • Is the element present in the DOM when your script runs?

Cause 2: Script Executing Before the DOM is Ready​

This is the second most common cause. HTML is parsed from top to bottom. If you place your <script> tag in the <head> of your document, it will execute before the browser has parsed the <body> and created the DOM elements.

Example of problem: HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- PROBLEM: This script runs before the input element exists. -->
  <script src="index.js"></script>
</head>
<body>
  <input id="my-input" type="text" value="Hello">
</body>
</html>

JavaScript (index.js):

// This will return `null` because the browser hasn't created the input yet.
const myInput = document.getElementById('my-input');
const value = myInput.value; // This line throws the error.

Solution: there are two ways to solve this:

The simplest solution is to move your <script> tag to the very end of the <body> tag. This ensures that all the HTML has been parsed and the DOM is fully available before your script begins to run.

<body>
  <input id="my-input" type="text" value="Hello">

  <!-- Correct: The script is loaded after all HTML elements are created. -->
  <script src="index.js"></script>
</body>

Solution B: Use the DOMContentLoaded Event​

Alternatively, you can keep your script in the <head> but wrap your code in a DOMContentLoaded event listener. This event fires only after the initial HTML document has been completely loaded and parsed.

document.addEventListener('DOMContentLoaded', function() {
  // This code will only run after the DOM is ready.
  const myInput = document.getElementById('my-input');
  if (myInput) {
    const value = myInput.value;
    console.log(value);
  }
});

The Solution: How to Prevent the Error​

Beyond fixing the cause, you should write "defensive" code that anticipates that an element might not be found. This prevents your entire script from crashing.

The best practice is to always check if your element exists before you try to use it.

const myInput = document.getElementById('my-input');

// Add a "guard clause" to check if the element was found.
if (myInput) {
  // This code will only run if `myInput` is a valid element.
  const value = myInput.value;
  console.log(value);
} else {
  // Handle the case where the element was not found.
  console.error('Error: Could not find the input element with ID "my-input".');
}

You can also use optional chaining (?.) for a more concise check if you only need to access a single property:

const value = document.getElementById('my-input')?.value;
console.log(value); // `value` will be `undefined` if the element doesn't exist (no error is thrown).

Conclusion​

The TypeError: Cannot read properties of null is always a two-part problem: your element selector returned null, and your code did not account for that possibility.

To solve it, follow this checklist:

  1. Check your selector: Is the ID, class, or query correct? Is there a typo?
  2. Check your script placement: Is your <script> tag at the end of the <body>, or are you using a DOMContentLoaded listener?
  3. Add a guard clause: Always check if the element exists (if (element) { ... }) before you try to access its properties, to make your code more robust.

Table of Contents