Skip to main content

Explore your training options in 10 minutes

JavaScript Onclick: A Step-By-Step Guide

James Gallagher - December 29, 2020

The JavaScript onclick event executes a function when a user clicks a button or another web element. This method is used both inline in an HTML document and in a JavaScript document.

When you are coding in JavaScript, it’s common to want to run code when a user interacts with the web page. For example, you might want something to happen when a user presses a button. But how do you implement this functionality in JavaScript?

That’s where the “onclick()” event can be useful. The onclick event is one of the most commonly used event types. onclick allows you to run code when a user clicks a button or another element on your web page.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

In this short guide, we’re going to break down how the onclick function works. We’ll discuss how you can use onclick in your code to make a website interactive.

Event Refresher

Onclick is a type of JavaScript event. Events are actions that take place in the browser that can either be started by the user or the browser itself. A user clicking a button, submitting a form, or pressing a key on their keyboard are all examples of events in action. In this tutorial, we’ll focus on the first one: a user clicking an element.

By using events, developers can make a web page interactive. You could make a form visible when the user clicks a button, or display a message to a user when they submit a form.

There are two main components to events: event handlers, and event listeners.

When you click a button, press a key, or hover over an element, an event is run. The event handler is the code that runs when your event starts. For example, when you click a button, the event handler will run.

The event listener is part of an element—like a button—that “listens” and waits until you interact with it. Then, the listener executes the event handler.

JavaScript onclick

The JavaScript onclick event executes a function when you click on a button or another web element. For instance, an onclick event can trigger a dialog box to appear when you clock on a button.

Here is the syntax for the onclick method in HTML:

<button onclick="codetorun">Click me</button>

When this HTML button is clicked, the “codetorun” JavaScript function will execute. We can use onclick with other elements, like a div. onclick is not exclusive to buttons.

You can also use onclick in plain JavaScript. Here is an example of a JavaScript onclick method:

var item = document.getElementById("button");
item.onclick = function() {

We use the JavaScript getElementById method to retrieve an element from our web page. When we click on the element with the ID “button” our onclick function will execute.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Button onclick JavaScript Example

Let’s say you want to change some text on a web page after you click on a p element, or a paragraph. We can use the onclick attribute to implement this feature on a website. Let’s start with an HTML page with a button and some text. We’ll also create a JavaScript file that will hold our event code.


<!DOCTYPE html>

	<title>onclick example</title>
<!-- Main body of code -->
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>

<!-- Reference our JavaScript event code -->
<script src=”js/onclick.js”></script>


This is an example of a basic web page, but it’s not interactive yet. When this web page runs, we’ll see a button and some text, but nothing will happen when we click our button. That’s because we haven’t implemented the onclick script function yet.

Now that our web page is ready, we can start to create our onclick event. We first need to add the onclick() event listener to our button. This event will listen for when the user clicks on the button.


	<button onclick=”changeParagraph()”>Click here.</button>

	<p>This text will change when you click the button.</p>

Let’s create our “onclick.js” file, which will hold the code for our changeParagraph() event. This event will change the text of our paragraph (the “p” element) with something else.


const changeParagraph = () => {
	const paragraph = document.querySelector(“p”);
	paragraph.textContent = “This text has changed because you clicked the button.”

We have defined a JavaScript function called changeParagraph. We use the JavaScript querySelector method to select a paragraph on our page. When we first load the page, we’ll see our button and text that says, “This text will change when you click the button.”

After we click the button, our web page changes and shows our new text:


Overall, onclick() is a type of JavaScript event that allows you to run certain code when an element on the web page is clicked.

That’s it! By using the code above, we have successfully created a webpage that will run code when we press a button. While our code above only changes text, you can make it as complicated or as simple as you would like.

If you want a user to be alerted when they click the button, you can use the alert() function in JavaScript. If you want to add “if” statements into your code, you can do that as well.

For more JavaScript learning resources, check out our How to Learn JavaScript guide .

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse,, Afrotech, and others.

Skip to main content