How to get image id on click event

Question

I am trying to get the image id when an image is clicked and set it as a var. When the first image in the column is clicked it works. When any other image is clicked nothing happens. I've tried multiple different click events and can't get it working. Any leads or suggestions much appreciated.

<div class="row">
    <div class="column">
        <img id="myImg" alt="" src="img/work/3.jpg">
    </div>
    <div class="column">
        <img id="myImg1" alt="" src="img/work/4.jpg">
    </div>
    <div class="column">
        <img id="myImg2" alt="" src="img/work/6.jpg">
    </div>
</div>

<div id="myModal" class="modal">

 <!-- The Close Button -->
 <span class="close">&times;</span>

 <!-- Modal Content (The Image) -->
 <img class="modal-content" id="img01">

 <!-- Modal Caption (Image Text) -->
 <div id="caption"></div>
 </div>

 <script type="text/javascript">
 var img = document.getElementById("myImg");
 document.addEventListener('click', function(e) {
img = document.getElementById(e.target.id);
 }, false);

 var modal = document.getElementById("myModal");

 //Get the image and insert it inside the modal - use its "alt" text as a 
 caption
 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";
 }
 </script>

Possible duplicate of [Getting the ID of the element that fired an event](https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) — thmsdnnr, Sep 05 '19 at 17:12

score 1 · Answer 1 · answered Sep 05 '19 at 17:13

Just add the event to the onclick function call and then do what you want with the event.target.id:

img.onclick = function(event){
     console.log(event.target.id);
     modal.style.display = "block";
     modalImg.src = this.src;
     captionText.innerHTML = this.alt;
}

score 1 · Accepted Answer · answered Sep 05 '19 at 17:31

You put the listener just to copy the initial value of the var img(myImg), put the code (img.onclick = function () {}) to run once; I made a quick fix inside the click listener:

<script type="text/javascript">

var img = document.getElementById("myImg2");
document.addEventListener('click', function(e) {
    var targetId = e.target.id;
    //simple id filter
    if(targetId == "myImg" || targetId == "myImg1" || targetId == "myImg2"){
        img = document.getElementById(e.target.id);
        console.log("img")
        modal.style.display = "block";
        modalImg.src = img.src;
        captionText.innerHTML = img.alt;
    }
}, false);

var modal = document.getElementById("myModal");

//Get the image and insert it inside the modal - use its "alt" text as a 
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

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


</script>

But a better way was for you to put all of your images into one class and put the listener one by one with to on for, as you can see on this link.

score 1 · Answer 3 · answered Sep 05 '19 at 17:34

First, the problem is because you are only adding the click event to the first image. You should use class for images and id for close button. Add a class for the images:

<div class="column">
    <img class="myImg" alt="" src="img/work/3.jpg">
</div>
<div class="column">
    <img class="myImg" alt="" src="img/work/4.jpg">
</div>
<div class="column">
    <img class="myImg" alt="" src="img/work/6.jpg">
</div>

Add id for the span instead of class:

<span id="close">&times;</span>

Then, use JQuery! Get all elements with class myImg and assign event handler to them:

$('.myImg').click(function() {
    modal.style.display = 'block';
    modalImg.src = this.attr('src');
    captionText.innerText = this.attr('alt');
});

Assign event handler to span with id close:

$('#close').click(function() { modal.style.display = 'none'; });

Finished! It should work.

score 0 · Answer 4 · answered Sep 05 '19 at 17:25

You can try to add a click handler to every image on the document.

var imageClickHandler = function() {
    img = this.id;
}

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onclick = imageClickHandler;
}

How to get image id on click event

4 Answers4

Linked