Using the javascript operator to create a bunch of thumbnail images

I want to use javascript to populate a section of an HTML page with thumbnails of images that link to full-size images. Currently, all that happens when this code is run is a listing of p open and close. I want this to make thumbnails for img (#), where # is 1-41.

JavaScript:

document.getElementById('img').innerHTML = "<p>"
for( var img = 1; img >= 41; img++)
{
    document.getElementById('img').innerHTML += ("<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>")
}
document.getElementById('img').innerHTML += "</p>"

HTML:

<div class="main">
    <div id="img"><div>
</div>
+4
source share
2 answers

Two things:

  • , innerHTML , , . -, , +=. , innerHTML += ... - , DOM , HTML (, "<p>"), , , +=, "<p></p>" — , , , , . , , .

  • img = 1, , img >= 41. , 1 >= 41.

:

var markup = "<p>";
for( var img = 1; img <= 41; img++)
{
    markup += "<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>";
}
document.getElementById('img').innerHTML = markup + "</p>";
+5

for.

for( var img = 1; img >= 41; img++)

for( var img = 1; img <= 41; img++)
+1

All Articles