The TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript is a standard error that you encounter during application development. This article will share the cause and how to fix this error. Read on it now.
The TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript
The innerHTML() property sets or returns the HTML content (inner HTML) of an element.
Syntax:
- Return the innerHTML property:
element.innerHTML - Set the innerHTML property:
element.innerHTML = text
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root1">
<h1>LearnShareIT</h1>
</div>
<div id="root2">
</div>
<script>
// Returns the innerHTML property of the element with id 'root1'
const rt1 = document.getElementById('root1');
const result1 = rt1.innerHTML;
// Set innerHTML property of element with id 'root2'
const rt2 = document.getElementById("root2");
const result2 = rt2.innerHTML = "LearnShareIT";
console.log(result1);
console.log(result2);
</script>
</body>
</html>Output:
<h1>LearnShareIT</h1>
LearnShareITThere are two reasons for the TypeError: Cannot read property ‘innerHTML’ of Null error to appear:
- Using the innerHTML() method on a non-existent DOM element.
- Insert <script> tag before declaring DOM elements.
Reason 1: Using the innerHTML() method on a non-existent DOM element
This is the most significant cause of the TypeError: Cannot read property ‘innerHTML’ error of Null. The following example describes this cause in detail.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root">
<h1>LearnShareIT</h1>
</div>
<script src="script.js"></script>
</body>
</html>// Returns the innerHTML property of the element with id 'rt'
const rt = document.getElementById('rt');
const rt.innerHTML;Output:
TypeError: Cannot read properties of null (reading 'innerHTML')In the above code, I used the document.getElementById() method to call the element whose id is “rt”. But this element is not contained in the DOM. In other words, the DOM element I called does not exist.
In this case, to solve this error, you must ensure that the Dom element that you call to use the method innerHTML() exists and is contained in the DOM.
Code:
// Returns the innerHTML property of the element with id 'root'
const rt = document.getElementById('root');
const result = rt.innerHTML;
console.log(result);Output:
<h1>LearnShareIT</h1>Reason 2: Inserting script tag before declaring DOM elements
The TypeError: Cannot read property ‘innerHTML’ of Null also occurs when you insert script tags before declaring DOM elements.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="script.js"></script>
<div id="root">
<h1>LearnShareIT</h1>
</div>
</body>
</html>// Returns the innerHTML property of the element with id 'root'
const rt = document.getElementById('root');
const result = rt.innerHTML;
console.log(result);Output:
TypeError: Cannot read properties of null (reading 'innerHTML')Since I inserted the script tag before declaring the div element with the id “root”, the program will run the script.js file before this div element is declared and contained in the DOM.
To avoid this error, you must insert the script tag after declaring DOM elements.
Summary
This article has explained what causes the TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript and how to solve it. I hope the information in this article will be helpful to you. Thanks for reading!
Maybe you are interested:
- SyntaxError: Illegal break statement in JavaScript
- “TypeError: Cannot read property ‘setAttribute’ of Null” in JavaScript
- “TypeError: slice is not a function” in JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
