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

manpreet Best Answer 2 years ago

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;
}

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





 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?

manpreet 2 years ago

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
  };
};