JavaScript how to use array and loop instead of multiple if statements
<p>I continue to add more <code>if statements</code> to this JavaScript snippet to show and hide the image thumbnails. The snippet just hides the thumbnails if the <code>src</code> is empty.</p>

<p>I need a way to transform my snippet into array and loop so that I don't have to keep adding on more <code>if statements</code> when I add more images in the <code>div</code>.</p>

<p>How would I condense my code in a way so that I don't end up with dozens or hundreds of <code>if statements</code>?</p>

<p>I have to use JavaScript. jquery is not an option.</p>

<pre><code>&lt;div id="thumbs"&gt;
  &lt;a href="#img1"&gt;&lt;img id="thumb1" src="photo.png"&gt;&lt;/a&gt;
  &lt;a href="#img2"&gt;&lt;img id="thumb2" src=""&gt;&lt;/a&gt;
  &lt;a href="#img3"&gt;&lt;img id="thumb3" src=""&gt;&lt;/a&gt;
  &lt;a href="#img4"&gt;&lt;img id="thumb4" src=""&gt;&lt;/a&gt;
  &lt;a href="#img5"&gt;&lt;img id="thumb5" src=""&gt;&lt;/a&gt;
  &lt;a href="#img6"&gt;&lt;img id="thumb6" src=""&gt;&lt;/a&gt;
  &lt;a href="#img7"&gt;&lt;img id="thumb7" src="picture.jpg"&gt;&lt;/a&gt;
  &lt;a href="#img8"&gt;&lt;img id="thumb8" src=""&gt;&lt;/a&gt;
  &lt;a href="#img9"&gt;&lt;img id="thumb9" src=""&gt;&lt;/a&gt;
  &lt;a href="#img10"&gt;&lt;img id="thumb10" src=""&gt;&lt;/a&gt;
  &lt;a href="#img11"&gt;&lt;img id="thumb11" src="stock.gif"&gt;&lt;/a&gt;
  &lt;a href="#img12"&gt;&lt;img id="thumb12" src=""&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
function checkThumbs() {

var thumb1 = document.getElementById("thumb1"); var img1 = document.getElementById("img1");
var thumb2 = document.getElementById("thumb2"); var img2 = document.getElementById("img2");
var thumb3 = document.getElementById("thumb3"); var img3 = document.getElementById("img3");
var thumb4 = document.getElementById("thumb4"); var img4 = document.getElementById("img4");
var thumb5 = document.getElementById("thumb5"); var img5 = document.getElementById("img5");
var thumb6 = document.getElementById("thumb6"); var img6 = document.getElementById("img6");
var thumb7 = document.getElementById("thumb7"); var img7 = document.getElementById("img7");
var thumb8 = document.getElementById("thumb8"); var img8 = document.getElementById("img8");
var thumb9 = document.getElementById("thumb9"); var img9 = document.getElementById("img9");
var thumb10 = document.getElementById("thumb10"); var img10 = document.getElementById("img10");
var thumb11 = document.getElementById("thumb11"); var img11 = document.getElementById("img11");
var thumb12 = document.getElementById("thumb12"); var img12 = document.getElementById("img12");

  if ((thumb1).getAttribute("src") == "") {
      thumb1.style.display = "none";
      img1.style.display = "none";
      thumb1.src = "clearpixeldot.png";
      img1.src = "clearpixeldot.png";
  }
  if ((thumb2).getAttribute("src") == "") {
      thumb2.style.display = "none";
      img2.style.display = "none";
      thumb2.src = "clearpixeldot.png";
      img2.src = "clearpixeldot.png";
  }
  if ((thumb3).getAttribute("src") == "") {
      thumb3.style.display = "none";
      img3.style.display = "none";
      thumb3.src = "clearpixeldot.png";
      img3.src = "clearpixeldot.png";
  }
  if ((thumb4).getAttribute("src") == "") {
      thumb4.style.display = "none";
      img4.style.display = "none";
      thumb4.src = "clearpixeldot.png";
      img4.src = "clearpixeldot.png";
  }
  if ((thumb5).getAttribute("src") == "") {
      thumb5.style.display = "none";
      img5.style.display = "none";
      thumb5.src = "clearpixeldot.png";
      img5.src = "clearpixeldot.png";
  }
  if ((thumb6).getAttribute("src") == "") {
      thumb6.style.display = "none";
      img6.style.display = "none";
      thumb6.src = "clearpixeldot.png";
      img6.src = "clearpixeldot.png";
  }
  if ((thumb7).getAttribute("src") == "") {
      thumb7.style.display = "none";
      img7.style.display = "none";
      thumb7.src = "clearpixeldot.png";
      img7.src = "clearpixeldot.png";
  }
  if ((thumb8).getAttribute("src") == "") {
      thumb8.style.display = "none";
      img8.style.display = "none";
      thumb8.src = "clearpixeldot.png";
      img8.src = "clearpixeldot.png";
  }
  if ((thumb9).getAttribute("src") == "") {
      thumb9.style.display = "none";
      img9.style.display = "none";
      thumb9.src = "clearpixeldot.png";
      img9.src = "clearpixeldot.png";
  }
  if ((thumb10).getAttribute("src") == "") {
      thumb10.style.display = "none";
      img10.style.display = "none";
      thumb10.src = "clearpixeldot.png";
      img10.src = "clearpixeldot.png";
  }
  if ((thumb11).getAttribute("src") == "") {
      thumb11.style.display = "none";
      img11.style.display = "none";
      thumb11.src = "clearpixeldot.png";
      img11.src = "clearpixeldot.png";
  }
  if ((thumb12).getAttribute("src") == "") {
      thumb12.style.display = "none";
      img12.style.display = "none";
      thumb12.src = "clearpixeldot.png";
      img12.src = "clearpixeldot.png";
  }
}
&lt;/script&gt;
</code></pre>