JavaScript – href vs onclick For Callback Function on Hyperlink

While programming in JavaScript, there can be a requirement to integrate multiple functionalities in a web page or site. For instance, relating similar features makes them dependent on one another. In such situations, callback functions combined with “href” and “onclick” play a vital role in streamlining the complexities on the developer’s end.

This write-up will illustrate the functionalities of href and onclick for the callback function on hyperlink in JavaScript.

“href” vs “onclick” for callback Function on Hyperlink in JavaScript

The “href” attribute gives the URL of the current page and the “onclick” event redirects to a JavaScript function. The “callback” function refers to a function that is passed as an argument to another function.

Core Differences Between “href” and “onclick” in JavaScript

Following are the core differences between “href” and “onclick” in JavaScript:

href	onclick
“href” is the HTML attribute.	“onclick” is a part of the event attribute.
It redirects to the hyperlinks via the “<a>” tag and switches between the web pages.	It is used to invoke the function in the script file.
It only functions when specified in the “<a>” tag.	It can be applied/attached to any HTML element.

How to Use “href” Attribute for Callback Function on Hyperlink in JavaScript?

The “href” attribute is utilized to redirect to the hyperlink in the anchor “<a>” tag and switch between various web pages. In this approach, this attribute can be used to invoke a callback function and display the message accordingly:

<a href="javascript: myFunction(myDisplay)">Click me</a>
<script>
function myFunction() {
let a = 'This is JavaScript with Linux Mint';
myDisplay(a);
}
function myDisplay(e) {
alert(e);
}
</script>

In the above code snippet:

Firstly, create a hyperlink via the anchor “<a>” tag having the “href” attribute redirecting to the function named “myFunction()” accumulating the callback function “myDisplay()” as its argument.
In the JS code block, declare a user-defined function “myFunction()”.
In its definition, initialize the stated string value.
After that, invoke the callback function “myDisplay()” having the specified string value as its argument.
Now, declare the callback function named “myDisplay()” by passing the string value from the former function as its argument and display it via the “alert” dialogue box upon clicking the link.

Output

In the above output, it can be seen that the callback function is invoked successfully via the “href” attribute.

How to Use “onclick” Event For Callback Function on Hyperlink in JavaScript?

The “onclick” event is utilized to invoke a particular function. This event can be applied combined with the callback function to redirect to the callback function ultimately upon the button click and return the sum of the values:

<button onclick="myFunction(3, 4, myDisplay)">Click me</button>
<script>
function myFunction(a, b) {
let sum = a + b;
myDisplay(sum);
}
function myDisplay(e) {
alert('The resultant value is: ' + e);
}
</script>

In the above code snippet:

Firstly, create a button with an attached “onclick” event redirecting to the function named myFunction() having the stated values and the callback function myDisplay() as its(main function) arguments, respectively.
In the JS code, define a function named “myFunction()” having the stated parameters.
In the function definition, return the sum of the values in the callback function as its argument.
Finally, define the callback function named “myDisplay()” and display the resultant sum in the alert dialogue box.

Output

As evident, the resultant sum value has been displayed as an alert upon the button click.

Conclusion

The “href” attribute gives the URL of the current page, and the “onclick” event redirects to a JavaScript function. These approaches can be utilized to redirect to the function, accumulating the callback function, and display the corresponding message and the resultant sum, respectively. This write-up illustrated the differences between the functionalities of href and onclick for the callback function on hyperlink in JavaScript.