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;"> neveropen </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;"> neveropen </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.
