The error “cannot set property ‘innerHTML’ of Null” in JavaScript is a common error of newbies. To fix it, you can use the div tag in your code or use the window.onload. Please see this step-by-step tutorial. I will help you fix this error.
Why does error “cannot set property ‘innerHTML’ of Null” in Javascript happen?
Cannot set property ‘innerHTML’ of Null in JavaScript usually occurs when your javascript code returns null for the innerHTML property. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>innerHTML error in Javascript</title>
<script>
document.getElementById('say-hi').innerHTML = 'hi';
</script>
</head>
<body>
<div id="say-hi"></div>
</body>
</html>Output:
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')The error here is because the Javascript code is loaded first, so the website doesn’t understand which tag is being executed, which generates the error.
There are many ways to fix this, but I will show simple ways to fix it in this post. Stay tuned for how to fix it.
How to fix this error?
Method 1: Put the div tag above the JavaScript code
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>innerHTML error in Javascript</title>
</head>
<body>
<div id="say-hi"></div>
<script>
document.getElementById('say-hi').innerHTML = 'hi';
</script>
</body>
</html>In this example, the div tag with the id ‘say-hi’ is loaded by the page before the javascript statement. Now your site runs as usual without this error anymore, and the ‘hi’ is output to the page. However, leaving the Javascript code in the body is not good.
Method 2: Use window.onload
Window.onload is used to execute commands after the web page has completely loaded its contents. This way, your page no longer appears with this error because the Javascript statement is executed after the page loads when the program can understand and run normally.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>innerHTML error in Javascript</title>
<script>
window.onload = function sayHi ()
{
document.getElementById('say-hi').innerHTML = 'hi';
};
</script>
</head>
<body>
<div id="say-hi"></div>
</body>
</html>We can see that this solution seems to be more optimal than the above method because we don’t put the javascript code under the body tag anymore.
Summary
In this article, I showed you how to fix the error “cannot set property ‘innerHTML’ of Null” in Javascript. With my two ways above, hopefully, you can solve your problems. Happy working and continue to learn with us.
Maybe you are interested:
- document.getElementsByClass is not a Function in JavaScript
- Cannot read property ‘addeventlistener’ of null in js
- Cannot read Properties of Undefined in JavaScript
- Cannot find module ‘@babel/core’ error
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css
