JavaScript onClick

Introduction

JavaScript is a well-known programming language. It is used in more than 95% of the websites we interact with daily. You may often see that on the click of a button, a whole page gets changed, a form field is opened, or a pop-up box appears. From the perspective of a programmer/developer, how can we implement such functionality and handle the website’s interactions with users? When it comes to interaction, JavaScript provides built-in functions to control events on a site.

There are two types of events in JavaScript:

• Event Listener – listens and waits for the event to get fired
• Event Handler – executed when an event is getting fired

In this article, you will learn about the most used event handler of JavaScript, the onClick event. There are other event handlers for hovering over an element or for keyboard key presses, but in this article, we will focus on the onClick event.

The onClick event is used to perform certain tasks at the click of a button or by interacting with an HTML element.

We will now show you an example to demonstrate how the onClick event works.

Example: Change Text Using onClick

In this example, we will change a selection of text on the click of a button using the onClick event. First, we will make a paragraph tag and give it an ID “paragraph” to access it later. We will create a button with the onClick event and call the function named “change.”

<p id="paragraph">Linuxhint</p>
<button onclick="change()">Change!</button>

In the script file, we will create a flag variable that will allow us to check the status of the text in our HTML paragraph tag. Then, we will write a function defining the “change” function. In the function definition, we will create an “if” statement, in which we will check the status using the flag variable. We will also change the text and alter the flag. It is a pretty simple piece of code!

var a = 1;

function change(){
 if (a==1) {
   document.getElementById("paragraph").innerHTML = "Linuxhint is awesome"
   a = 0;
 } else {
   document.getElementById("paragraph").innerHTML = "Linuxhint"
   a = 1;
 }
}

All right! After writing all this code, we will run the code, move to our browser, and click the newly created button. After clicking the button, the text should be changed from “Linuxhint” to “Linuxhint is awesome.”

We can apply the same technique anywhere to change the content of our website according to our needs. We can use it in changing an image or performing any type of task that we can imagine with this tool.

Conclusion

This article explains how to use the onClick event. In this article, you learned the concept of the onClick function in a practical way. The usage of the onClick event is so simple, even a beginner can start working with this function. You may continue learning, working, and gaining more experience in JavaScript at linuxhint.com to have a better grasp of this programming language. Thank you so much!

from Linux Hint https://ift.tt/3kRWrKz