Solutions To Fix “Cannot Set Property ‘InnerHTML’ Of Null” Error In Javascript

Cannot set property ‘innerHTML’ of Null in JavaScript

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:

Leave a Reply

Your email address will not be published. Required fields are marked *