onClick event on the anchor/ image tag html

Question

I have numerous small images, which I am rendering using HTML. When a user clicks on the image, they are next opened in modal body in big size. Since I need to dynamically change the content of modal body e.g. when Picture1.jpg is clicked, modal body should include picture1.jpg and vice versa.

However, I am not sure, how do I trigger onclick event on <a> tag or <img> tag to obtain some information that helps me to identify which image was clicked.

<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1.jpg" alt="image not available">
</a>
<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2.jpg" alt="image not available">
</a>

Modal

<div class="modal-body">
       <img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" >
</div>

In the event listener function, `this` and `event.target` will be the element that was clicked. Use `this.src`. — Barmar, Oct 26 '21 at 21:18

score 0 · Accepted Answer · answered Oct 26 '21 at 21:31

You can use event.target in plain javascript and $(this) if you want to use Jquery.

//Plain Javascript
document.getElementsByTagName('img')[0].addEventListener("click", function(event) {
  console.log(event.target.src);
});

//Jquery
$('img').click(function() {
  console.log($(this).attr('src'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/200">

is `[0]` a *magic number*? – Roko C. Buljan Oct 26 '21 at 22:29 — Roko C. Buljan, Oct 26 '21 at 22:29

score 0 · Answer 2 · answered Oct 26 '21 at 21:41

I would use a Button since you aren't actually linking, you're performing a JS function. Then I'd add an event listener to the buttons that updates the target images src based on the button's data-src value.

const buttonList = document.getElementsByClassName('target-button');
const modalImg = document.getElementById('imagepreview');

const processImg = (imgSrc) => () => {
  modalImg.src = imgSrc;
};

Array.from(buttonList).forEach((button) => {
  const buttonImgSrc = button.dataset.src;
  button.addEventListener('click', processImg(buttonImgSrc))
});

<button class="target-button" data-src="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1.jpg" alt="image not available" />
</button>
<button class="target-button" data-src="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2.jpg" alt="image not available" />
</button>

<img src="" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" />

onClick event on the anchor/ image tag html

2 Answers2