As a Javascript programmer, you must have dealt with the “TypeError: cannot read properties of null”.
In JavaScript, sometimes your code works completely fine, or you can get trapped in errors. This standard error occurs when one tries to read a property or call a method on a null object. In simple words, you try to access the value of null or undefined. If you are still in the same confused state, read further to find a precise solution.
Before we move toward the answer, let’s discuss two basic terms, null and DOM, in detail, which will help you to understand the article completely.
Table of Contents
What is a Null in JavaScript?
In JavaScript, a null is a primitive value, meaning the intentional absence of any object value. It is treated as a false in boolean operations. A variable with a null value is of the object type. Now understand null with the help of an example:
Code
console.log("Example of null"); let a = null; console.log("Type of a:" ,typeof a); console.log("A contain:" ,a);
Output
Example of null Type of a: object a contain: null
What is DOM in JavaScript?
Dom stands for Document Object Model in JavaScript; it is a programming interface that allows us to select, create, modify or remove elements from a document. We can easily add events to our document elements to make our page more dynamic.
Causes of the “TypeError: Cannot Read Properties of Null” Error
Normally, we face TypeError: cannot read properties of null in JavaScript when we try to access a property of the null object. Here we have a list of the most common causes of this error which are:
- Write wrong spelling
- Access property of a null object
- Inserting script tags before DOM elements declaration
Cause 1: Write The Wrong Spelling
When we use the wrong spell of an element id, we face this error now; let’s see an example of where we found this error.
Code
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <input type="text" id="fname" name="fname"> <script> var first_name = document.getElementById("name").value; console.log(firstName) </script> </body> </html>
Output
In the above coding, we write fname and in the script tag, we are trying to get the id name which is not present; that’s why we face this error.
Cause 2: Accessing a Property of a Null Object
Whenever we try to access a property of a null object, we have to face the type error. Now see a simple example in which we explain this concept:
Code
console.log("Error due to Property of null"); let myvariable=null; console.log("length of variable is:" ,myvariable.value);
Output
Cause 3: Inserting Script Tags Before Dom Element Declaration
The TypeError: cannot read properties of null is commonly occurs when we use the getElementById() method and pass it an id that is not present in the DOM. Usually, this error occurs when we write a script tag before the DOM element declaration. Now understand the reason for this error with the help of an example:
Code
Index.html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <script src="src/script.js"></script> <input type="text" id="name" name="name"> </body> </html> Script.js var firstName = document.getElementById("name").value; console.log(firstName)
Output
In this code, we write script tags before declaring DOM elements; that’s why we have TypeError.
Ways to Fix the “TypeError: Cannot Read Properties of Null” Error
Following are some solutions we can use to fix TypeError: cannot read properties of null in JavaScript.
- Check element id
- Write script tag after DOM elements declared
- Ways to handle null values
- Check if The Object Is Null or Undefined
- Check for Typo Errors
- Check if the object and property exist
- Use Type Checking
Now have a look at the solutions to that errors.
Solution 1: Check Element Id
It’s a good practice to always double-check the element id so you save yourself from this common type of error. Now solve the above error by simply writing the correct element id.
Code
<!DOCTYPE html> <html lang="en"> <head> </head> <body> Enter your First Name: <input type="text" id="fname" name="fname"> <script> var first_name = document.getElementById("fname").value; </script> </body> </html>
Output
Solution 2: Write Script Tag After DOM Elements Declaration
Always try to write a script tag at the end of the body tag or after the DOM element declaration. Now understand this solution by removing the error from the above example:
Code
Index.html <!DOCTYPE html> <html lang="en"> <head> </head> <body> Enter your First Name: <input type="text" id="fname" name="fname"> <script src="src/script.js"></script> </body> </html> Script.js var firstName = document.getElementById("fname").value;
Output
Solution 3: Handle Property of Null Values
When we try to access a property of a null object, we face a type error that can crash our web application. Here we have the following ways to handle null values:
- Use the if structure
- Use the ternary operator
- Use the try-catch block
We have four ways to handle null values; now, let’s see these four ways one by one.
We can check whether the value is null with the help of most simple way, that is, if else statement. Now let’s see a piece of code to check null values:
Code
console.log("Handle null with if else statement"); let myvariable=null; if (myvariable) { console.log("The value of variable is:" ,myvariable.value); } else { console.log('Your variable contains null'); }
Output
Handle null with if else statement Your variable contains null
We can use the ternary operator to handle a null value; it is a little more complicated than if statement. Now let’s understand it with the help of an example:
Code
console.log("Handle null with the ternary operator); let myvariable=null; const myval = myvariable? myvariable.value : 'default'; console.log("The value of the variable is:" , myval);
Output
Handle null with the ternary operator The value of the variable is: default
Lastly, we can save our web application from crashing by simply putting a try-and-catch block. Now let’s see an example in which we use try catch to handle a null value:
Code
console.log("Handle null with ternary operator"); let myvariable=null; try { let myval = myvariable.value; } catch(err){ console.log(err.message); }
Output
Handle null with ternary operator Cannot read property 'value' of null
Solution 4: Check if The Object Is Null or Undefined
Make sure that the object you are trying to access is not null or undefined. If it is, you will get this error.
Solution 5: Check for Typo Errors
Make sure you have typed the object and property names correctly. A common mistake is spelling the object or property name incorrectly.
Solution 6: Check if the object and property exist
Make sure that the object and property you are trying to access actually exist. If you are trying to access an object or property that does not exist, you will get this error.
Solution 7: Use Type Checking
You can use type checking to ensure that the object is not null or undefined before trying to access its properties. For example, you can use the “typeof” operator to check the type of the object, like this:
if (typeof object !== "undefined" && object !== null) { // access object properties }
Conclusion
In conclusion, TypeError: cannot read properties of null is a common error that occurs in JavaScript when you try to access a value of null or commit a spelling mistake.
This article shows how to fix JavaScript’s “TypeError: cannot read properties of null” error. We have discussed all the reasons and their solutions, so now you can eliminate erroneous lines in your code.
Let’s have a quick recap of the topics discussed above.
- What is a Null?
- What is DOM?
- Causes of TypeError: cannot read properties of null in JavaScript.
- How can we fix TypeError: cannot read properties of null in JavaScript?
Finally, you significantly understand the “TypeError: cannot read properties of null” error in JavaScript; it’s time to remember the concepts; comment below 👇 the most straightforward way of handling null value.