JSFiddle - React, Tailwind, and code Playground

by Simplybj

HTML

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

JavaScript

var nodelist = document.getElementById("thumbs").children.length;

    var child = {
      href: '',
      imgID: '',
      imgSrc: ''
    };

    for (var images = 0; images <= nodelist; images++) {

      var image = document.getElementsByTagName("img")[images];
      var src = image.getAttribute("src");
      if (src.length == 0) {


        //write here your logic
        image.style.display = "none";
        image.src = "clearpixeldot.png";
      }


    }