Skip to main content
X

Explore your training options in 10 minutes

JavaScript TypeError Cannot Read Property ‘style’ of Null

Kelly M. - September 27, 2020


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Kelly M.

About the author: Kelly is a technical writer at Career Karma, where she writes tutorials on a variety of topics. She attended the University of Central Florida, earning a BS in Business Administration. Shortly after, she attended Lambda School, specializing in full stack web development and computer science. Before joining Career Karma in September 2020, Kelly worked as a Developer Advocate at Dwolla and as a team lead at Lambda School. Her technical writing can be found on Codecademy, gitConnected, and JavaScript in Plain English.

Skip to main content