How to Fix “Cannot Read Properties of Null (Reading ‘value’)” in JavaScript

by

One of the most common errors beginners face:

'Cannot read properties of null' error from JavaScript.

In most cases, this happens because JavaScript tries to access the value of something that doesn’t exist at that moment.

In other words, your code is trying to read .value from something that is null, meaning nothing was found in the DOM.

This issue is very common when working with forms, inputs, or HTML parts that haven’t fully loaded yet.

Quick Fix (Fast Solution)

Before accessing .value, make sure it exists:

const input = document.getElementById("myInput");

if (input) {
  console.log(input.value);
}

Or use optional chaining:

console.log(document.getElementById("myInput")?.value);

What can cause this error?

This problem usually happens when:

  • The input does not exist in the HTML
  • The ID or selector is incorrect
  • The script runs before the page finishes loading
  • It hasn’t been rendered yet
  • The code is running on another page without this item

A simple test can help you identify it:

console.log(document.getElementById("myInput"));

If it returns null, the issue is already clear.

Step-by-step Solutions

1. Check the selector

Make sure the ID is correct:

Html:

<input id="email">

Javascript:

const input = document.getElementById("email");

Small typos are enough to cause this problem.

2. Run the code after the page loads

If JavaScript runs before the HTML is ready, it won’t exist yet.

document.addEventListener("DOMContentLoaded", () => {
      const input = document.getElementById("myInput");
      console.log(input.value);
});

Or place your script at the end of the <body>.

3. Prevent your code from breaking

Add a simple check:

const input = document.getElementById("myInput");

if (!input) return;

console.log(input.value);

This avoids errors when it is not present.

Tip: This happened a lot in my projects, often breaking buttons and freezing animations, so it’s always worth checking before accessing a property.

4. Be careful with dynamic structures

In the case that it is created later (for example, via JavaScript or an API), you need to make sure it exists before accessing it.

setTimeout(() => {
     const input = document.getElementById("myInput");
     console.log(input?.value);
}, 1000);

Common mistakes

  • Typing the wrong ID
  • Running the script too early
  • Assuming it always exists
  • Using .value on elements that don’t support it
  • Testing on different pages without checking the HTML

Conclusion

The “Cannot read properties of null (reading ‘value’)” error happens when nothing is found.

Once you start checking if it exists and control when your code runs, this issue becomes much easier to avoid.

If you’re still unsure, use console.log to inspect what’s being returned, this solves most cases quickly.

FAQ

Leave a Comment