Is there a way to simplify the detection the index number of a button with the same div class and load it’s corresponding image?

So I managed to get the images I set under the same class to load up their respective fullsized images when clicked on.

However, I remembered seeing there was a way to simplify it further?

This is what I have so far, that is working out fine, but just needs to be simplified for convenience:

**The HTML:** 
<div class="section-waterSustains" id="water_Sustains">
                        <h3>How water sustains nature</h3>
                        <br>
                        <div class="waterSustains_collagesht">
                            <!----Creating the collage picture-->
                            <div class="waterSustains_collagepic">
                                <img class="ws-collagePic" id="collagePic1" src="images/africa-deer-drinking-water-preview.png">
                                <img  class="ws-collagePic" id="collagePic2" src="images/Frog_During_Rain_preview.png">
                                <img  class="ws-collagePic" id="collagePic3" src="images/Bird_drinking_Water_preview.png">
                                <img  class="ws-collagePic" id="collagePic4" src="images/12_YT_SPARROW_preview.png">
                                <img  class="ws-collagePic" id="collagePic5" src="images/Fishes-swiming-preview.png">
                                <img  class="ws-collagePic" id="collagePic6" src="images/kitten_watching_rain_drops_roll_down_window_preview.png">
                            </div>
                            <p class="waterSustains_collageCaption">Click the Animals and Plants to see how they interact with Nature everyday!</p>
                        </div>
                        
                        <!-----Creating Overlay and full image-->
                        <div id="overlayCollage01" class="collageOverlay">
                            <sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
                            <img class="overlay-Content" id="img01" src="images/africa-deer-drinking-water.jpg">
                        </div>

                        <div id="overlayCollage02" class="collageOverlay">
                            <sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
                            <img class="overlay-Content" id="img01" src="images/Frog_During_Rain_Wallpaper.jpg">
                        </div>

                        <div id="overlayCollage01" class="collageOverlay">
                            <sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
                            <img class="overlay-Content" id="img01" src="images/Bird_drinking_Water.jpg">
                        </div>

                        <div id="overlayCollage01" class="collageOverlay">
                            <sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
                            <img class="overlay-Content" id="img01" src="images/12_YT_SPARROW_1391748f.jpg">
                        </div>

                        <div id="overlayCollage01" class="collageOverlay">
                            <sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
                            <img class="overlay-Content" id="img01" src="images/pexels-harrison-haines-3536511.jpg">
                        </div>

                        <div id="overlayCollage01" class="collageOverlay">
                            <sl-icon-button name="x" label="Close button" circle size="large" id="overlay-CloseBtn"></sl-icon-button>
                            <img class="overlay-Content" id="img01" src="images/kitten_watching_rain_drops_roll_down_window_9028683602.jpg">
                        </div>

                        
                    </div>

----------------------End HTML-------------------------------------
**The Javascript:**
/*--------Creating Modal images for How Water sustains nature Collage-------*/

//Get Overlay
var overlay = document.querySelectorAll(".collageOverlay");

//Get image. 
var collageImg = document.querySelectorAll(".ws-collagePic");

//Get overlay to be active on clicking on image
collageImg[0].onclick = function() {
  overlay[0].style.display = "block";
}

collageImg[1].onclick = function() {
  overlay[1].style.display = "block";
}

collageImg[2].onclick = function() {
  overlay[2].style.display = "block";
}

collageImg[3].onclick = function() {
  overlay[3].style.display = "block";
}

collageImg[4].onclick = function() {
  overlay[4].style.display = "block";
}

collageImg[5].onclick = function() {
  overlay[5].style.display = "block";
}
//Get icon button (x) that closes Overlay
var overlayClose = document.querySelectorAll("#overlay-CloseBtn");

// When the user clicks on icon button (x), close the overlay
overlayClose[0].onclick = function() {
  overlay[0].style.display = "none";
}

overlayClose[1].onclick = function() {
  overlay[1].style.display = "none";
}

overlayClose[2].onclick = function() {
  overlay[2].style.display = "none";
}

overlayClose[3].onclick = function() {
  overlay[3].style.display = "none";
}

overlayClose[4].onclick = function() {
  overlay[4].style.display = "none";
}

overlayClose[5].onclick = function() {
  overlay[5].style.display = "none";
}
--------------------------END Javascript--------------------------

Thanks mates!

Answer

Use the forEach() method when working with an array of a class. I have provided a simplified method for your code using forEach() methods.

var overlay = document.querySelectorAll(".collageOverlay");
var collageImg = document.querySelectorAll(".ws-collagePic");
var overlayClose = document.querySelectorAll("#overlay-CloseBtn");

Array.from(collageImg).forEach(function(collageImgArray, i) {
  collageImgArray.addEventListener('click', function() {
  overlay[i].style.display = "block";
  });
});

Array.from(overlayClose).forEach(function(overlayCloseArray, i) {
  overlayCloseArray.addEventListener('click', function() {
  overlay[i].style.display = "none";
  });
});

Advertisement

Answer