Reading time: 3 minutes
When running JavaScript code, you might encounter an error that says:
This error occurs when you try to read a property of an object, but the object itself is actually null so the property doesn’t exist.
Let me show you an example that causes this error and how I fix it.
Suppose you write some JavaScript code to select an element from the DOM and read its value using the .value property.
You might write code as follows:
The code above tries to fetch an element that has an id of text-input . When the element isn’t found, then JavaScript will return null .
In the second line, we tried to read the value property of the inputEl object. If the inputEl object is null , then the error occurs:
Variations of this error might occur depending on what property you’re trying to access.
For example, you can also try to call the addEventListener() method on a button object as follows:
When the getElementById() method can’t find the button, it returns null , so calling the addEventListener() method generates the error:
As you can see, calling a property from an element that doesn’t exist will cause this error.
To resolve this error, you need to make sure that you’re not accessing properties of a null object.
You can do so by adding an if statement before accessing the property. For example:
This way, the value property from the inputEl object won’t be called when the inputEl is null.
The same goes for the button element. As an alternative, you can also use the optional chaining operator ?. as follows:
This way, the addEventListener() method is only called when the btnEl variable isn’t null.
Sometimes, you also get this error even when the element exists on your page. If this is the case, then you need to make sure that you run the JavaScript code after the page content has been loaded.
Make sure that you place your tag before the closing
It doesn’t matter whether you have an inline or external script. You need to place it after the HTML elements.
Another way to ensure the script is executed after the content has been loaded is to listen for the DOMContentLoaded event from the document object as shown below:
By wrapping your JavaScript code inside the addEventListener() method for the DOMContentLoaded event, you make sure that the code only gets executed after the content is loaded.
And that’s how you fix the TypeError: Cannot read properties of null when running JavaScript code.
I hope this tutorial helps. See you in other tutorials! 👋
I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
Type the keyword below and hit enter
Click to see all tutorials tagged with:
