As always in our tutorials, we don’t want to just show you what to do. We want to explain what what we do actually means. If you’re in a rush and just want the code, simply scroll to the end of the article for the TL;DR

What is a click event handler?

First things first… what does “ click event handler “ actually mean?

Let’s split this into two parts for clarity. MDN Web Docs describes a click event really nicely so I’m going to quote them here: “An element receives a click event when a pointing device button (such as a mouse’s primary mouse button) is both pressed and released while the pointer is located inside the element.”

Given we now know what a click event is, we can think of a click event handler as a tool that allows us to do something when a click event occurs.

#javascript