document.getElementById - dynamic use for using the same ID more than once

Question

var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

<img id="myImg" src="imageone.jpg" alt="Image one" >

<br>
<br>
<img id="myImg" src="imagetwo.jpg" alt="Image two" >

So the above snippet is used in the modal image css3 tutorial. I understand i cannot have more than one tags with the same ID which is why the code online works with one image. After researching i know i have to use a dyamic ID with JS.

var img = document.getElementById('myImg');

The previous JS line is what i need to change.

How does one dynamically change getElementById? So that i can use more then one with differentr src images?

Research shows Using a Tag selector or a class selector is inappropriate.

Any help documents to aid in my learning will be great as well.

---

So i made some nice progress with the css and stuff and it looks great. Now my next step is to use existing alts to include text when the modal appears. Below is the existing js line i had already

var captionText = document.getElementById("caption");

Now below is the html i will use when calling alt so that each image has its own alt text appearing under the modal pop up

I've tried it and doesnt seem to work, could it be my formatting in the css?

Answer 1

If there's a collection of elements that need to be processed the same, it's best to use the class attribute to target them.

Instead of targeting one element with: document.getElementById, you get a NodeList, which is a collection of elements, using document.getElementsByClassName or document.querySelectorAll.

Then, you need to loop through these elements and use the code you've already written.

Here's an example:

var imgs = document.getElementsByClassName('myImg');

for (var i = 0; i < imgs.length; i += 1) {
  var img = imgs[i];

  img.onclick = function() {
    // your on click stuff
  };
};

Don't forget to change the HTML to: <img class="myImg" src="imageone.jpg" alt="Image one" >

Answer 2

Hope this is helpful for you

var imgs = document.querySelectorAll('.gallery-img');

if (imgs) {

  for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', showModal, false);
  }

}

function showModal() {
  var modal = document.querySelector('.modal');
  if (modal) {
    var img = modal.querySelector('img');
    var close = modal.querySelector('.close');
    modal.classList.add('open');
    img.src = this.src;

    if (close) {
      close.addEventListener('click', closeModal, false);
    }
  }
}

function closeModal() {
  this.parentNode.classList.remove('open');
}

img {
  width: 200px;
  cursor: pointer;
  border: 2px solid transparent;
}
img:hover {
  border: 2px solid #191919;
}
.modal {
  display: none;
  width: auto;
  height: auto;
  background: #ccc;
  border-radius: 4px;
  padding: 6px;
}
.modal.open {
  display: inline-block;
}
.modal .close {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: block;
  text-align: right;
}

<img class='gallery-img' src="http://wallpaperbeta.com/wallpaper/small_fish_by_name_beta_minimalism_hd-wallpaper-296364.jpg" alt="">

<img class='gallery-img' src="https://wallpaperscraft.com/image/flowers_small_flower_surface_rose_43393_2048x1152.jpg" alt="">

<div class="modal">
  <span class="close">&times;</span>
  <img src="" alt="">
</div>