Displaying sequence of images with Javascript


#1

I had to write this in all HTML but I know there is a way to write it in javascript much more quickly! Thoughts?

<div id="image" style="max-width:100%">

<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
<img src="images/4.png">
<img src="images/5.png">
<img src="images/6.png">
<img src="images/7.png">
<img src="images/8.png">
<img src="images/9.png">
<img src="images/10.png">
<img src="images/11.png">
<img src="images/12.png">
<img src="images/13.png">
<img src="images/14.png">
<img src="images/15.png">
<img src="images/16.png">
<img src="images/17.png">
<img src="images/18.png">
<img src="images/19.png">
<img src="images/20.png">
<img src="images/21.png">
<img src="images/22.png">
<img src="images/23.png">
<img src="images/24.png">
<img src="images/25.png">
<img src="images/26.png">
<img src="images/27.png">
<img src="images/28.png">
<img src="images/29.png">
<img src="images/30.png">
<img src="images/31.png">
<img src="images/32.png">
<img src="images/33.png">
<img src="images/34.png">
<img src="images/35.png">
<img src="images/36.png">
<img src="images/37.png">
<img src="images/38.png">
<img src="images/39.png">
<img src="images/40.png">
<img src="images/41.png">
<img src="images/42.png">
<img src="images/43.png">
<img src="images/44.png">
<img src="images/45.png">
<img src="images/46.png">
<img src="images/47.png">
<img src="images/48.png">
<img src="images/49.png">
<img src="images/50.png">
<img src="images/51.png">
<img src="images/52.png">
<img src="images/53.png">
<img src="images/54.png">
<img src="images/55.png">
<img src="images/56.png">
<img src="images/57.png">
<img src="images/58.png">
<img src="images/59.png">
<img src="images/60.png">
<img src="images/61.png">
<img src="images/62.png">
<img src="images/63.png">
<img src="images/64.png">
<img src="images/65.png">
<img src="images/66.png">
<img src="images/67.png">
<img src="images/68.png">
<img src="images/69.png">
<img src="images/70.png">
<img src="images/71.png">
<img src="images/72.png">
<img src="images/73.png">
<img src="images/74.png">
<img src="images/75.png">
<img src="images/76.png">
<img src="images/77.png">
<img src="images/78.png">
<img src="images/79.png">
<img src="images/80.png">
<img src="images/81.png">
<img src="images/82.png">
<img src="images/83.png">
<img src="images/84.png">
<img src="images/85.png">
<img src="images/67.png">
<img src="images/68.png">
<img src="images/69.png">
<img src="images/70.png">
<img src="images/71.png">
<img src="images/72.png">
<img src="images/73.png">
<img src="images/74.png">
<img src="images/75.png">
<img src="images/76.png">
<img src="images/77.png">
<img src="images/78.png">
<img src="images/79.png">
<img src="images/80.png">
<img src="images/81.png">
<img src="images/82.png">
<img src="images/83.png">
<img src="images/84.png">
<img src="images/85.png">
<img src="images/67.png">
<img src="images/68.png">
<img src="images/69.png">
<img src="images/70.png">
<img src="images/71.png">
<img src="images/72.png">
<img src="images/73.png">
<img src="images/74.png">
<img src="images/75.png">
<img src="images/76.png">
<img src="images/77.png">
<img src="images/78.png">
<img src="images/79.png">
<img src="images/80.png">
<img src="images/81.png">
<img src="images/82.png">
<img src="images/83.png">
<img src="images/84.png">
<img src="images/85.png">
<img src="images/67.png">
<img src="images/68.png">
<img src="images/69.png">
<img src="images/70.png">
<img src="images/71.png">
<img src="images/72.png">
<img src="images/73.png">
<img src="images/74.png">
<img src="images/75.png">
<img src="images/76.png">
<img src="images/77.png">
<img src="images/78.png">
<img src="images/79.png">
<img src="images/80.png">
<img src="images/81.png">
<img src="images/82.png">
<img src="images/83.png">

</div>

#3

In javascript you can programmatically modify the DOM (document object model).

One way to do this is like so:

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

window.onload = initFunction()
{

var imgDiv = document.getElementById("image");

for (i = 0; i < 84; ++i)
{
    var elem = document.createElement("img");
    elem.src="https://www.google.com/images/srpr/logo11w.png";   
    // use the following line if you want to use sequential images.
    // elem.src="images/" + i + ".png";
    elem.alt="image " + i;
    imgDiv.appendChild(elem);
}
}
</script>
<body>

<div id="image">

</div>

</body>
</html>

Sometimes this kind of DOM manipulation can be done more crisply with a library like jQuery, but it is not necessary in this case.


#4

A working example is here http://christopherbaker.net/test.html


#5

thank you! You’re the best