JavaScript TypeError Cannot Read Property ‘style’ of Null

A typeerror is thrown when a value is not of the expected type. Unlike the value of undefined, the null value can be unintentionally assigned a value developers code into their program. The error represents the absence of any value or object. The value is primitive and falsy. 

The style property is used to get and set the inline style of a Document Object Model (DOM) element. DOM is a programming interface that represents the objects you see on a web page or document. You can manipulate this representation in the console. 

In this article, we dive into the cause of receiving a typeerror of null when using the style property in the DOM, as well as some possible solutions.

Why Javascript Is Throwing the Typeerror of Null With the Style Property in the DOM

When trying to update the style of an element using JavaScript, we need to call the right value for the selector we are invoking. Below are the getElements used when trying to manipulate an element on a web page or document.

document.getElementsByTagName('p')
document.getElementsById('insertIdNameGivenToElement')
document.getElementsByClassName('insertClassNameGivenToElement')

We can also use the document.querySelector() and document.querySelectorAll() methods.

Let’s say that we have some of the following elements in the document we are trying to manipulate.

<h1 class="title"> Let's Fix This Error </h1>
<ol class= "orderedList">
  <li id="first"> First read the error message </li>
  <li id="second"> Second understand the error message </li>
  <li id="fourth"> Third, debug </li>
</ol>

Let’s say we want to change the third item on the list. Using the DOM, the code should look something like this:

const changeDOM = document.getElementById('third');
changeDOM.style.color = 'green'

However, this code will throw a typerror of null since we do not have an id called ‘third’. The id we are trying to modify in our JavaScript code is an absent value. The id name of the third list item is coded as ‘fourth’.

The error can also be thrown when misspelling values or ignoring the importance of case sensitivity.

Debugging

We can fix this error in one of two ways. We can change the id name in the HTML from ‘fourth’ to ‘third’ or we can change our code in JavaScript to get the id of ‘fourth’. Because it is always better to code for human readability, we will just change the id name on the third list item to be third.

<h1 class="title"> Let's Fix This Error </h1>
<ol class= "orderedList"> 
  <li id="first"> First read the error message </li>
  <li id="second"> Second understand the error message </li>
  <li id="third"> Third, debug </li>
</ol>

const changeDOM = document.getElementById('third');
changeDOM.style.color = 'green'

Conclusion

When trying to change the style of an element in the DOM, we have to make sure we are accessing it by the correct name. Any attempt to change the style of an element with an absent value will throw a typeerror value of null.