模态图像存在类问题

Question

I got this modal script to display bigger images on my site. It worked well, but only with 1 image. When i tried to add more images - script didn't worked, and nothing was happening. Can someone tell me what am I doing wrong?
Here's some code:

 var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementsByClassName("zdjecie"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function() { modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } 

 <img class="zdjecie" style="max-height: 16rem;max-width: 16rem;" src="example.jpg"> 

When I was using ID's instead of classes it worked well - but i couldn't add more images - that's why i need to use classes. Someone has any ideas? I'd be greatful

Answer 1

The document.getElementsByClassName returns an array, which contains all the dom has the zdjecie class.

So you have to loop through this array to add the event, or put these images inside a container and use event-delegation , which is a more efficient way. Because it just bind event once. More about event-delegation : https://javascript.info/event-delegation `

Here is the code using event-delegation .

 var handleImageClick = function(evt){ if(evt.target.className.indexOf('zdjecie') === -1) return; modal.style.display = "block"; modalImg.src = evt.target.src; captionText.innerHTML = evt.target.alt; } // Get the image and insert it inside the modal - use its "alt" text as a caption var modal = document.getElementById("myModal"); var imageContainer = document.getElementById("imageContainer"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); imageContainer.addEventListener('click', handleImageClick) // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } 

 .zdjecie{ background-color: yellow; width: 100px; height: 100px; display: inline-block; } 

 <div id="imageContainer"> <img class="zdjecie" alt="1" style="max-height: 16rem;max-width: 16rem;" src="example1.jpg" /> <img class="zdjecie" alt="2" style="max-height: 16rem;max-width: 16rem;" src="example2.jpg" /> <img class="zdjecie" alt="3" style="max-height: 16rem;max-width: 16rem;" src="example3.jpg" /> <img class="zdjecie" alt="4" style="max-height: 16rem;max-width: 16rem;" src="example4.jpg" /> </div> <div id="myModal"> <span class="close">x</span> <img id="img01" style="max-height: 16rem;max-width: 16rem;" /> <p id="caption"></p> </div>