Throwing an Error "cannot read property style of null" in JavaScript
Last Updated :
18 Jul, 2022
In this article, we will see how we may receive an error "cannot read property style of null" in JavaScript, along with understanding the cause to get this error with the help of an example, and thereafter we will try to understand how we may correct it with certain small changes in the code snippet.
When we are trying to access one property i.e. either doesn't contain any value (not even defined properly) in it or it is not defined in the whole code snippet, then there is the possibility to get this error. Below is a pictorial representation of the browser's console containing error message (in red).
We will understand the concept through the illustration.
Example 1: In this first, we will create an HTML document (named "index.js", or any other user-defined name) and we will create a div tag containing some text in it which initially we will give a color of green itself (code snippet shown below).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<!-- This is really a bad technique to
call JavaScript file just after the body tag-->
<!-- This is the reason why we receive that
shown error in console itself-->
<script src="index.js"></script>
<div id="id_1" style="color: green;">
GeeksforGeeks
</div>
</body>
</html>
Output:
Then, we will create another file which is a JavaScript file (named "index.js", or any other user-defined name), which we will use to access the div box id and later try to display its value in the browser's console and further try to change it's valued and then we will look into the output section that what exact value we have witnessed whenever we want to change it or even display it.
JavaScript
let id = document.getElementById("id_1");
console.log(id);
// Cannot read properties null error
// will be received...
id.style.color = "blue";
Now, again when we will refresh the page and open the browser's console following output is displayed.
Output:
Now, as we may see and visualize that we have received the value of null and that's because we have called our script tag just before the div tag itself so that's why it's impossible for document.getElementById() to fetch the existing id value inside the div tag.
Let's have a look at another example that shows how we may correct it with little minor changes embedded in it.
Example 2: In this example, we will take into consideration all the things which we have done in the previous example itself, and hence here we will try to do some minor changes starting from calling the <script> tag just after the <div> tag and also calling it, in the end, is the best practice which will help them to not to run infinitely in some situations. Here is our HTML file with some changes in it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<div id="id_1" style="color: green;">
GeeksforGeeks
</div>
<script src="index.js"></script>
</body>
</html>
Below shown is our JavaScript file also having certain changes in itself.
JavaScript
let id = document.getElementById("id_1");
console.log(id);
// This works perfectly now.....
id.style.color = "blue";
Output:
Below shown is the image of the browser's console which shows the div block containing the id as well as the initial values in itself.
Note: Always remember not to call the script tag just after the body tag in order to avoid certain unusual situations with files as well as with their loading and working process.
Similar Reads
How to Fix "Cannot read property 'click' of null" in JavaScript? When working with JavaScript, you may encounter the error message "Cannot read property 'click' of null." This error typically occurs when you try to access a property or call a method on an object that is null or undefined. This error is common when dealing with the DOM elements and event handlers
3 min read
How to read properties of an Object in JavaScript ? Objects in JavaScript, it is the most important data type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data-types(Number, String, Boolean, null, undefined, and symbol) in the sense that these primitive data-types all store a singl
2 min read
How to Get Current Value of a CSS Property in JavaScript ? In this article, we will see how to get the current value of a CSS property using JavaScript. Below are the approaches used to Get Current Value of a CSS Property in JavaScript: Table of Content Inline StyleUsing the getComputedStyle() methodApproach 1: Inline StyleInline styles are styles that are
3 min read
JavaScript TypeError - Can't access property "X" of "Y" This JavaScript exception can't access property occurs if property access was performed on undefined or null values. Message: TypeError: Unable to get property {x} of undefined or null reference (Edge) TypeError: can't access property {x} of {y} (Firefox) TypeError: {y} is undefined, can't access pr
1 min read
How to Fix JavaScript TypeError: Cannot Set Properties of Undefined? JavaScript is a versatile and widely used programming language but like any language, it can sometimes produce errors that can be tricky to debug. One common error that developers is the TypeError: Cannot set properties of the undefined. This error typically occurs when we attempt to assign a value
4 min read
How to Detect an Undefined Object Property in JavaScript ? Detecting an undefined object property is the process of determining whether an object contains a certain property, and if it does, whether the value of that property is undefined. This is an important concept in JavaScript programming, as it helps to prevent errors that can occur when attempting to
3 min read