How to Solve cannot read property of null

To solve the cannot read property of null error in JavaScript, make sure that we should not get a null value in the click() function. For that, move your script tag to the bottom of the body tag. This way script will run at the end when all DOM elements have been created.

cannot read property of null in JavaScript

The cannot read property of null error occurs in JavaScript by:

  1. Calling a “click()” function on a “null” value i.e DOM element does not exists.
  2. Give the JS script tag before the DOM elements are declared in HTML.

Let’s look at the error and then see how we can rectify the issue by understanding the examples below.

Here is the example below, which will generate the “cannot read property of null” error.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8" />
</head>

<body>

 <script src="app.js"></script>

 <button id="btn" onclick="console.log('Button clicked')">
 Check
 </button>

</body>

</html>

Now, write the app.js file.

const c = null;
c1.click();

Here in this example, we create a cons c which is null and then call the click() function on a null value that will generate the error “cannot read property of null” on your console.

app.js

const c = document.getElementById('hello'); 
console.log(c);

c.click();

Here, we passed an id that does not exist to the “getElementByID” method, which is going to generate a null value, and then calling the same click() function will lead to a “cannot read property of null” error.

app.js

const c = document.getElementById(btn); 
console.log(c);

c.click();

We have given the correct id to the getElementByID method if everything is fine. However, still, we will get the “cannot read property of null” error because the script tag is given before the DOM element declaration.

Now let’s see how to fix this error.

As we discussed earlier, to solve the SyntaxError, we need to make sure that we should not get a null value in the click() function. For that, move your JS script tag to the bottom of the body tag. This way script will run at the end when all DOM elements have been created.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8" />
</head>

<body>

 <button id="btn" onclick="console.log('Button clicked')"> //DOM element created
 Check
 </button>

 <script src="app.js"></script> //JS tag at the end of body tag

</body>

</html>

app.js

const c = document.getElementById(btn);
console.log(c);

c.click();

Conclusion

When we try to “click()” method on a “null” value, we get a “cannot read property of null” error, this error will be solved if DOM elements are created before JS execution, we are moving the JS tag at the bottom of the body tag in HTML.

That’s it for this tutorial.

See also

How to Solve SyntaxError: Unexpected end of input

How to Solve Uncaught ReferenceError: required is not defined

How to solve reference error: window is not defined

How to solve reference error: document is not defined

Leave a Comment