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.
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() {
codetoexecute...
}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.
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.
index.html <!DOCTYPE html> <html> <head> <title>onclick example</title> </head> <!-- Main body of code --> <body> <button>Click here.</button> <p>This text will change when you click the button.</p> </body> <!-- Reference our JavaScript event code --> <script src=”js/onclick.js”></script> </html>
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.
index.html ... <body> <button onclick=”changeParagraph()”>Click here.</button> <p>This text will change when you click the button.</p> </body> …
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.
onclick.js
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:
Summary
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.
