Alternative to `onclick` in `img_tag`

Phoenix Forum Questions / Help
,
1

I have a group of image thumbnails where I would like to swap out a larger image with the one that has just been clicked. I just noticed that img_tag doesn’t generate onclick events. Obviously, I could just build my own tag, but now I’m wondering what the alternative to onclick would be.

Any insights?

1 Like
2

Something like this:

<%= img_tag ..., id: "main-photo" %>
<%= img_tag ..., data: [swappable: "main-photo"] %>

document.querySelectorAll("img[data-swappable]").forEach(thumbnail => {
  thumbnail.addEventListener("click", e => {
    document.getElementByid(thumbnail.getAttribute("data-swappable")).src = thumbnail.src
  })
})
5 Likes
3

Thank you, Chris!

1 Like