Sometimes, we want to add a click event handler to an image with JavaScript.

In this article, we’ll look at how to add a click event handler to an image with JavaScript.

How to add a click event handler to an image with JavaScript?

To add a click event handler to an image with JavaScript, we can select the image and set its onclick property to a click event handler function.

For instance, we write:

<img src="https://i.picsum.photos/id/572/200/300.jpg?hmac=Rt4zD8IxoA-nMVDrBQ72mgbTVRfQ6OwW3MhWy_3lpdk" />

to add an image.

Then we write:

const img = document.querySelector('img')
img.onclick = () => {
  console.log('clicked')
}

Then we select the img element with document.querySelector.

Next, we set its onclick property to a function that runs when we click on the image.

As a result, we see 'clicked' logged when we click on the image.

Conclusion

To add a click event handler to an image with JavaScript, we can select the image and set its onclick property to a click event handler function.