How can I print out Javascript data into HTML DOM?

Question

I'm trying to print out a JS data into an HTML DOM. I couldn't get it to print. What did I do wrong ?

<!DOCTYPE html>
<html>

    <head>
        <title>JSON</title>
        <script type="text/javascript">
            // user is the property of obj1
            var obj1 = {
                user: "John",
                age: 26,
                country: "United States"
            };
            document.getElementById("results").innerHTML = obj1.user + "<hr>";
        </script>
    </head>

    <body>
        <div id="results"></div>         <---- Expected to see John HERE
    </body>

</html>

In my console

Uncaught TypeError: Cannot set property 'innerHTML' of null

Here is my JSFiddle

Read the error console. That should indicate the problem. Work backwards from there. — user2864740
– user2864740, Commented Jun 10, 2015 at 0:41
I'm very to new to JS. I totally forgot about my console. Thanks for reminding. — code-8
– code-8, Commented Jun 10, 2015 at 0:42

chris97ong · Accepted Answer · 2015-06-10 00:50:04Z

1

The div with the Id of results has not loaded when the document.getElementById("results").innerHTML = obj1.user + "<hr>"; in the Javascript was called.

So window.onload can be used to only execute the Javascript code when the document is loaded.

<!DOCTYPE html>
    <html>
    
        <head>
            <title>JSON</title>
            <script type="text/javascript">
                // user is the property of obj1
                window.onload = function() {
                    var obj1 = {
                        user: "John",
                        age: 26,
                        country: "United States"
                    };
                    document.getElementById("results").innerHTML = obj1.user + "<hr>";
                }
            </script>
        </head>
    
        <body>
            <div id="results"></div>         <---- Expected to see John HERE
        </body>
    
    </html>

Another way is to put the script tag (without the window.onload, as in the OP's post) behind <div id="results"></div>, so that the div is loaded before the JavaScript code is executed.

edited Jun 10, 2015 at 0:50

answered Jun 10, 2015 at 0:45

chris97ong

7,0809 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

code-8 Over a year ago

First to answer, the reward is yours. Thank-you. :)

code-8 · Accepted Answer · 2015-06-10 00:47:25Z

1

There might be more than 1 way to solve this, but I solve mine by wait for the window to load:

window.onload = function()
{
    // my JSCodeHERE
}

answered Jun 10, 2015 at 0:47

code-8

59.5k122 gold badges397 silver badges677 bronze badges

1 Comment

Saumil Over a year ago

Upvoting because I didn't knew window.onload executes after the page is loaded completely

Saumil · Accepted Answer · 2015-06-10 00:52:33Z

1

The reason you are getting the error is because you have specified the script within the head section and so the script is executed before the HTML element with id="results" is created

Instead of importing the script in the head section, import it just before the closing body tag </body>

    <body>
        <div id="results"></div>         <---- Expected to see John HERE
        <script type="text/javascript">
            // user is the property of obj1
            var obj1 = {
                user: "John",
                age: 26,
                country: "United States"
            };
            document.getElementById("results").innerHTML = obj1.user + "<hr>";
        </script>
    </body>

edited Jun 10, 2015 at 0:52

answered Jun 10, 2015 at 0:43

Saumil

2,5176 gold badges34 silver badges54 bronze badges

Collectives™ on Stack Overflow

How can I print out Javascript data into HTML DOM?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related