getElementById.innerHTML don't seem to work

Question

So, I've just started experimenting with JavaScript. I've been searching for a solution to my problem for a while now and cannot seem to find one. It's likely an easy explanation for this, but I'm sure there's other newbies to JS which might have the same problem.

The reason I need to implement HTML with JS is because I'm trying to set info from a database into the tumbnails. Though I've not passed the variables into this code yet.

<head>
<script type="text/javascript">

    document.onload = function () {

        document.getElementById("thumbnails").innerHTML =
            '<div class="col-sm-6 col-md-4">' +
                '<div class="thumbnail">' +
                    '<img src="pictures/workshop.jpg" alt="...">' +
                    '<div class="caption">' +
                        '<h3>Thumbnail label</h3>' +
                        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et erat a ipsum luctus gravida. Nunc in elit id neque lobortis viverra eu a lorem. Donec eget augue a odio consectetur tempus eu vitae turpis.</p>' +
                        '<p><a href="#" class="btn btn-primary" role="button">Delta</a> <a href="#" class="btn btn-default" role="button">Les mer</a></p>' +
                    '</div>' +
                '</div>' +
             '</div>';
    }

</script>
</head>

<body>
    <div class"row" id="thumbnails">
    </div>

So what exactly is the problem? Are there errors reported? Does *anything* happen? Have you tried adding `console.log()` calls to see if the code is even running? — Pointy, Apr 09 '16 at 21:17
console.log(document.getElementById("thumbnails").innerHTML); Doesn't seem to return anything to the console. Even though there are other elements inside the id tag. Which shows on my page. Edit: here's a link to the page http://home.nith.no/~frotor15/eksamenwebS2/home.php — Kevin Frostad, Apr 09 '16 at 21:22
I guess you're looking for either... `window.onload = function(){};` or `document.addEventListener('DOMContentLoaded', function(){});` — Emissary, Apr 09 '16 at 21:25
Possible duplicate of [Document.onload not working in JavaScript?](http://stackoverflow.com/questions/23989460/document-onload-not-working-in-javascript) — Sebastian Simon, Apr 09 '16 at 21:31
Called console.log(document.getElementById("thumbnails").innerHTML); At the end of the page. It returns my six thumbnails inside the id tag, but doesn't return the seventh I've been trying to insert with JS. I also did console.log(document.onload); at the end of the page. The content showed up. — Kevin Frostad, Apr 09 '16 at 21:37

score 1 · Answer 1 · answered Apr 09 '16 at 21:22

The solution is:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div class"row" id="thumbnails"></div>

        <script type="text/javascript">

            function var1() {
              document.getElementById("thumbnails").innerHTML =
                    '<div class="col-sm-6 col-md-4">' +
                        '<div class="thumbnail">' +
                            '<img src="pictures/workshop.jpg" alt="...">' +
                            '<div class="caption">' +
                                '<h3>Thumbnail label</h3>' +
                                '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et erat a ipsum luctus gravida. Nunc in elit id neque lobortis viverra eu a lorem. Donec eget augue a odio consectetur tempus eu vitae turpis.</p>' +
                                '<p><a href="#" class="btn btn-primary" role="button">Delta</a> <a href="#" class="btn btn-default" role="button">Les mer</a></p>' +
                            '</div>' +
                        '</div>' +
                     '</div>';
            }

            window.onload = var1;
        </script>
    </body>
</html>

Anyway, i'll suggest you use jQuery (https://jquery.com).

jQuery is not necessary here at all. Also, it’s not necessary to declare the function with the name `var1`. You can simply use `window.onload = function(){`…`}`. — Sebastian Simon, Apr 09 '16 at 21:27
Hey, jQuery Is just the suggestion to do more and write less. Yes i know we dont need declare the function, but it's just a example to show the way to do that :) — , Apr 09 '16 at 21:32

getElementById.innerHTML don't seem to work

1 Answers1