CODEWITHSUNDEEP
javascripthtml
Kevin Frostad
Kevin Frostad

Reputation: 181

getElementById.innerHTML don't seem to work

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>

Upvotes: 0

Views: 125

Answers (1)

user4990969
user4990969

Reputation:

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).

Upvotes: 1

Related Questions