modal html css javascript works only on one image

Question

I am currently making a modal for a school project but i can't figure out why it doesn't work.

html

 <div id="kw1cpraktijk">
        <img id="myImg" src="../assets/kw1cpraktijk.PNG">
        <h2>Praktijkopdracht P2</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="willem2praktijk">
        <img id="myImg1" src="../assets/willem2praktijk.PNG">
        <h2>Project P1</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="myModal" class="modal">
        <span class="close"> &times;</span>
        <img class="modal-content" id="img">
    </div>
css
    
#myImg

{
    
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%; 
    max-width:450px;
}




 .modal
    {
        display: none;
        position: fixed;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0, 0.85);
    }
    
    .modal-content
    {
        margin: auto;
        display: block;
        width: 100%;
        max-width: 800px;
        animation-name: zoom;
        animation-duration: 0.6s;
    }
    
    @keyframes zoom
    {
        from {transform:scale(0)}
        to {transform:scale(1);}
    }
    
    .close
    {
        position: absolute;
        color: white;
        font-size: 50px;
        font-weight: bold;
        right: 35px;
        top: 0;
    }
    
    .close:hover
    {
        color: grey;
        cursor: pointer;
        text-decoration: none;
    }

javascript

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
}

var exit = document.getElementsByClassName("close")[0];

exit.onclick = function() {
    modal.style.display = "none";
}

It only works on the first image. What should i change? I think it has something to do with the javascript because it only runs once. I hope someone could help me out.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim egestas lacus sit amet varius. Sed nec massa consectetur, posuere ex eget, convallis dui. Praesent aliquam leo nec metus tristique, vitae eleifend ex finibus. Pellentesque sagittis luctus eros, in placerat mauris efficitur id. Suspendisse ultricies sit amet lectus id rhoncus. Nam ligula quam, vulputate quis lacinia vitae, tempus sit amet risus. Duis lectus lectus, volutpat vitae justo at, pulvinar dignissim est. Nullam dignissim interdum dapibus. Duis commodo euismod lorem a posuere. Aliquam tincidunt iaculis vehicula. Nunc eget vestibulum velit. Vivamus tempor leo eget ex aliquam sollicitudin. Suspendisse sodales vel libero in fermentum.

gretakava gretakava · Accepted Answer · 2021-01-16T23:41:03

Both images don't work because you are using ID and onclick function is targeting only one element. I recommend using class, so it can be used on more than one element. Please change your javascript to the below:

var modal = document.getElementById("myModal");
var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


for ( var e in img ) {
  img[e].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
  }
}


var exit = document.getElementsByClassName("close")[0];

exit.onclick = function() {
  modal.style.display = "none";
}

And this to HTML:

<div id="kw1cpraktijk">
    <img class="myImg" src="../assets/kw1cpraktijk.PNG">
    <h2>Praktijkopdracht P2</h2>
    <p>dit is wat tekst</p>
</div>
<div id="willem2praktijk">
    <img class="myImg" src="../assets/willem2praktijk.PNG">
    <h2>Project P1</h2>
    <p>dit is wat tekst</p>
</div>
<div id="myModal" class="modal">
    <span class="close"> &times;</span>
    <img class="modal-content" id="img">
</div>

modal html css javascript works only on one image

1 Answers