title: Making the source for an image dynamic in javascript
body: <p>See the following html</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;index&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;img src="1.jpg" id="displayimage" alt="" onmousedown="change()"&gt;
  
   &lt;script src="scripts.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>and the associated JavaScript</p>
  
  <pre><code> imgs=Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg", "18.jpg", "19.jpg", "20.jpg", "21.jpg", "22.jpg", "23.jpg", "24.jpg");
   var x=0;
  
   function change() {
   document.getElementById("displayimage").setAttribute("src", imgs[++x]);
   if (x==23) {
   x=0;
    }
    }
  </code></pre>
  
  <p>I need to make the image source dynamic - is there anyway to have an extension for the image source in the JS, i.e. images1/img[++x] ? This code works just fine as my 24 images are in the same directory as these files, but I have multiple folders images1, images2, images3, etc that eah contain 24 images and I want to be able to display the first set (say, images1/), and then allow the user to click 'next' and the second set (images2/) loads up. </p>