JavaScript onclick() Events – Tutorial, With Examples

JavaScript onclick() Tutorial

JavaScript adds interactivity to web pages. This article shows you how to trigger JavaScript functions when an HTML element is clicked using onclick() events and attributes. Code examples included.

JavaScript Events

An event in JavaScript simply means that something has happened. The mouse has moved, or a key has been pressed, and JavaScript has been notified by the raising of an event.

onclick Event

When the user clicks on something, the onclick event is raised, allowing you to trigger some JavaScript code when an element is clicked.

Defining onclick Events

There are several ways to define onclick events, outlined below.

Inline HTML

The first method is to simply place the JavaScript code in an onclick attribute inside the HTML tag for the element you wish to make clickable:

<element onclick="myFunction">

Note that:

  • element is any HTML element, usually a <button> or an <a> link
  • myFunction is the JavaScript code you want to execute when the element is clicked

Example

<a href="#" onclick="alert("You clicked me!");">Click me!</a>

Above, an HTML link is defined. Usually, the href attribute points to the address of another website or page, but in this case, it’s set to # – meaning it leads nowhere.

An onclick attribute has been added, which pops up a JavaScript alert.

When the link is clicked, the onclick event is fired, and the alert is shown.

Event Handlers

Keeping your JavaScript code separated from your HTML code makes your code more manageable overall – you don’t have to go hunting through the HTML when debugging or updating your JavaScript logic. The following methods separate the onclick event handlers entirely:

object.onclick = function(){myFunction};

Note that:

  • object is a reference to the HTML element you wish to make clickable
  • myFunction is the code you wish to execute when it is clicked

Example

<button id="clickable">Click me!</button>

<script>
    document.getElementById("clickable").onclick = function() {alert("You clicked me!");};
</script>

As you can see, all of the JavaScript is now in the same place, so you can see exactly what’s going on. The HTML portion only contains the element to be displayed to the user – the logic is separated.

Event Listeners

Event listeners can be used to serve the same purpose as above – separating the JavaScript Logic from the HTML layout.

object.addEventListener("click", myFunction);

Example

<button id="clickable">Click me!</button>

<script>
    document.getElementById("clickable").addEventListener("click", alert("You clicked me!")); 
</script>

One common use for onclick() is to refresh the page in a web browser.

To find out more about adding interactivity to web pages using JavaScript, check out the Mozilla Developer docs.

SHARE:
nv-author-image

Brad Morton

I'm Brad, and I'm nearing 20 years of experience with Linux. I've worked in just about every IT role there is before taking the leap into software development. Currently, I'm building desktop and web-based solutions with NodeJS and PHP hosted on Linux infrastructure. Visit my blog or find me on Twitter to see what I'm up to.

Leave a Reply

Your email address will not be published. Required fields are marked *