How Does Onclick Event Work in JavaScript
The “onclick” event performs a certain functionality when the user clicks on an HTML element. It works on all types of HTML elements except the <html>, <title>,<base>, <style>, <head>,<body>,<script>, <iframe>, <meta>, <br>, <bdo>, and <param> elements.
The “onclick” event is mostly used for the execution of the JavaScript function upon the button or element click. It enables the users to call a JavaScript function and perform the specified action.
This guide will demonstrate the objective, and working of the “onclick” event in JavaScript.
How Does onclick Event Work in JavaScript?
The “onclick” event allows the execution of the JavaScript function. It returns the output of the JavaScript functions when the user clicks on the specified element.
Syntax
In the above syntax:
- element: It specifies the particular HTML element such as “p”, “h2”, “h3” etc.
- function(): It represents the defined function that will be invoked upon the event trigger.
The following section will demonstrate the working of the “onclick” event with the help of various examples.
Example 1: Applying the “onclick” Event to Change the Paragraph Text Color
In this scenario, an “onclick” event can be associated with “<p>”, i.e., paragraph HTML element to change its text color.
HTML Code
First, have a look at the following HTML code:
In the above HTML code:
- First, add a subheading of level 2 via the “<h2>” tag and set its alignment to “center”.
- Next, include a paragraph having an associated “onclick” event redirecting to the function named “sample()” that will be triggered upon the button click.
- Now, add the “<p>” tag which specifies a paragraph with an id “test” and “onclick” event.
- The “test” displays the paragraph having a new text color.
- The “onclick” event redirects to the function “sample()” that will be triggered upon the paragraph click.
JavaScript Code
Now, let’s move on to the JavaScript code block:
function sample() {
document.getElementById("test").style.color = "green";
}
</script>
In the above code block:
- First of all, declare a function named “sample()”.
- In its definition, apply the “getElementById()” method to access the paragraph and change its text color via the “style.color” property upon clicking the paragraph.
Output
The output shows the updated new color of the paragraph.
Example 2: Applying the “onclick” Event to Change the Text Font Size and Background Color
This example applies the “onclick” event to customize the paragraph such that the text “font size” and “background color” of a paragraph can be modified upon the event trigger.
HTML Code
First, follow the given HTML code:
In the above HTML code:
- The “<h2>” creates the level 2 i.e., subheading aligned at “center”.
- The “<p>” represents the paragraph having an attached “onclick” event accessing the JavaScript function “myfunc()”.
JavaScript Code
Now, move on to the following Javascript code:
function myfunc() {
document.getElementById("first").style.fontSize = "22px";
document.getElementById("first").style.backgroundColor = "yellow";
}
</script>
In the above lines of code:
- Define the function “myfunc()”.
- In its definition, the “document.getElementById()” method fetches the paragraph via its id twice and applies the “fontSize” and “backgroundColor” properties to modify the paragraph upon the event trigger.
Output
As seen, the “font size” and the “background color” of the paragraph have been changed.
Example 3: Applying the “onclick” Event to Copy the Input Field Value
Here, the “onclick” event can be utilized to copy the input field data.
HTML Code
First, check the stated HTML code:
In the above HTML code:
- Likewise, specify the stated heading aligned to the center.
- The “<input>” element named “Password” of type “password” sets a password having the value “Linuxhint12345” with an assigned id “pass1”. It will display the mentioned password value in the input field.
- The second “Re-Enter” input field also has a type “Password” with an id “pass2” having a null “value” attribute.
- Also, create a “button” named “Copy Password” having an attached “onclick” event accessing the JavaScript function “result()”.
JavaScript Code
Now, overview the following JavaScript code:
function result() {
document.getElementById("pass2").value = document.getElementById("pass1").value;
}
</script>
In the above lines of code:
- Declare the function “result()”.
- In its definition, apply the “document.getElementById()” method twice to copy the value from the former “Password” field to the latter one.
Output
As analysed, the given “Password” value has been copied to the “Re-Enter” text field upon the button click.
Example 4: Applying the “onclick” Event to Display the Current Date
In this example, the discussed event can be utilized to display the current date of the system by referring to the paragraph.
HTML Code
Let’s overview the following HTML code:
In the above HTML code:
- Similarly, include a “<h3>” subheading.
- In the next step, create a button tag having an associated “onclick” event redirecting to the function named “fun()” that will be triggered upon the button click.
- After that, the “<p>” denotes the null paragraph assigned an id “test” to display the current date of the system.
JavaScript Code
Now, let’s move on to the JavaScript code:
function fun() {
document.getElementById('test').innerHTML= Date();
}
</script>
In the above lines of code:
- A function named “fun()” is defined.
- In the function definition, the “document.getElementById()” method fetches the paragraph via its “id” and displays the date using the built-in “Date()” function and the “innerHTML” property.
Output
The above output shows the current date of the system upon the button click.
Conclusion
JavaScript offers the built-in “onclick” event that triggers an action upon the HTML element click. It invokes the JavaScript function to perform the specified action upon the event trigger. It could be implemented with the button or another HTML element like “<p>”, “<h>” etc. This post explained the usage and functionality of the “onclick” event in JavaScript.
Source: linuxhint.com