Javascript loop - document.write

JavaScript
1

Hi all

I have a group of lists of thumbnail images like below


        <ul>
          <li><a href="images/flora/01.jpg" rel="lightbox"><img src="images/flora/01_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/02.jpg" rel="lightbox"><img src="images/flora/02_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/03.jpg" rel="lightbox"><img src="images/flora/03_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/04.jpg" rel="lightbox"><img src="images/flora/04_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/05.jpg" rel="lightbox"><img src="images/flora/05_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/06.jpg" rel="lightbox"><img src="images/flora/06_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/07.jpg" rel="lightbox"><img src="images/flora/07_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/08.jpg" rel="lightbox"><img src="images/flora/08_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/09.jpg" rel="lightbox"><img src="images/flora/09_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/10.jpg" rel="lightbox"><img src="images/flora/10_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/11.jpg" rel="lightbox"><img src="images/flora/11_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/12.jpg" rel="lightbox"><img src="images/flora/12_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/13.jpg" rel="lightbox"><img src="images/flora/13_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/14.jpg" rel="lightbox"><img src="images/flora/14_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/15.jpg" rel="lightbox"><img src="images/flora/15_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/16.jpg" rel="lightbox"><img src="images/flora/16_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/17.jpg" rel="lightbox"><img src="images/flora/17_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/18.jpg" rel="lightbox"><img src="images/flora/18_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/19.jpg" rel="lightbox"><img src="images/flora/19_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/20.jpg" rel="lightbox"><img src="images/flora/20_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/21.jpg" rel="lightbox"><img src="images/flora/21_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/22.jpg" rel="lightbox"><img src="images/flora/22_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/23.jpg" rel="lightbox"><img src="images/flora/23_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/24.jpg" rel="lightbox"><img src="images/flora/24_th.jpg" alt="" /></a></li>
          <li><a href="images/flora/25.jpg" rel="lightbox"><img src="images/flora/25_th.jpg" alt="" /></a></li>
        </ul>

I have a few list like this where the images are numbered sequentially and in named folders.

I thought it would be quicker to write a javascript loop and use the loop number to change the image number like below


          <script type="text/javascript">
            var i=1;
            for (i=1;i<=22;i++){
            document.write('<li><a href="images/beach/01.jpg" rel="lightbox"><img src="images/beach/0"'+i+'"_th.jpg" alt="" /></a></li>');
            }
          </script>

This code isn’t working but it is producing empty img holders. I’m thinking I am escaping the quotes wrong.

What am I doing wrong?
I’m I escaping the quotes wrong?
Is this a good way to do this?

2

Try this

window.onload = function(){
    var e = document.getElementsByTagName('ul')[0];
    
    for(var i=1; i<=22; i++){
        var li = document.createElement('li'), href = document.createElement('a'), img = document.createElement('img');
        var id = (i.length == 1) ? '0'+i : i;
        
        // Set some values
        href.setAttribute('href', 'images/beach/'+id+'.jpg');
        href.setAttribute('rel', 'lightbox');
        img.setAttribute('src', 'images/beach/'+id+'_th.jpg');
        
        href.appendChild(img);
        li.appendChild(href);
        e.appendChild(li);
    }
};
3

Thanks for the code SgtLegend

4

No problem

5

When you intend a write to page of a block it is usually better to write the whole block at once., rather than line by line. Also, your own script will work if you pre-process the new image string and then drop the whole string into the build line, rather than the components.
Here is a script that does it for you. You will note that I have added the width and height of the <img > so that you have well formed HTML. In practice you might need to store the relevant widths and heights for each image in an array and then use them for the images in the build string.

<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Write to Page</title>
</head>

<body>

<script type=“text/javascript”>
<!–
var i=1, newImg;
// commence build of unordered list
var build=‘<ul>
‘;
// build all <li> tags
for (i=1;i<5;i++)
{// pre-process string
newImg=“0”+i+“_th.jpg”;
build+=’<li><a href=“images/beach/01.jpg” rel=“lightbox”>’;
// use string in build
build+=‘<img src="images/beach/’+newImg+'" width=“100” height=“50”><\/a><\/li>
‘;
}
// finish unordered list
build+=’<\/ul>
';
// write to page
document.write(build);
//–>
</script>

</body>

</html>