javascript - using modal images in ejs table

Question

I have a table rendering data from my database, and everything is working, but I basically want to have a button that says view image, and it will show the image of the product linked with that row.

here's what I have:

                <td>

                  <input id="<%= data[i].IMAGE %>" type="button" src="<%= data[i].IMAGE %>" alt="ORIGINAL PRODUCT IMAGE" value="See Current Image" width="300" height="200">

                </td>

JS front-end:

// Get the modal
                    var modal = document.getElementById('myModal');
                    
                    // Get the image and insert it inside the modal - use its "alt" text as a caption
                    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;
                    }
                    
                    // 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";
                    }

it only works for the first image in the ejs row. I think it might have something to do with the id... please help! thanks

Answer 1

等待大神解答