How To Write JavaScript Function As URL In Hyperlink?

You can write JavaScript function as URL in hyperlink on “href” attribute of <a>….</a> tag. Writing JavaScript codes in a URL is another way of creating a link. We can include JavaScript code in the client-side using javascript: protocol specifier. This special protocol type specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter. The “resource” identified by a javascript: URL is the return value of the executed code, converted to a string. If the code has an undefined return value, the resource has no content.

You can use a javascript: URL anywhere you’d use a regular URL: on the “href” attribute of <a> tag, on the action attribute of a <form>, on the click event of a button, on the method like window.open(), etc.

Table of Contents

The syntax for writing JavaScript function

Following is the syntax for writing JavaScript function within href attribute of <a> tag.

<a href="javascript:myfunction();">JavaScript Link</a>

Similarly, the following is the syntax for writing JavaScript function within the action attribute of a <form> tag.

<form action="myfunction();" onsubmit="return validate(this);" method="post"> .......</form>

Examples

Here is an example, where you will get a new date using javascript function as a hyperlink.

<a href="javascript:new Date().toLocaleTimeString();"> What time is it?</a>

While using such functions on a hyperlink, some browsers like Firefox and IE execute the code in the URL. Then use the returned string as the content of a new document to display. Just as when following a link to an http: URL, the browser erases the current document and displays the new one. The value returned by the code above does not contain any HTML tags. Other browsers like chrome and safari do not allow URLs like the one above to overwrite the containing document, they just ignore the return value of the code. But they support the JavaScript code to display the returned content on the alert box as below.

<a href="javascript:alert(new Date().toLocaleTimeString());"> check the document without writing the docment</a>

In the above cases, the javascript: URL serves the same purpose as an on-click event handler. The link above would be better expressed as an on-click handler on a <button> element. The <a> element generally reserved for hyperlinks that load new documents. If you want to open a new document using a javascript: URL which does not overwrite the document, you can use the void operator with a window.open method is given below.

<a href="javascript:void window.open('https://siteforinfotech.com/p/javascript-programming-tutorials.html');">Open link on new window</a>

If you want to open a new document using a javascript: URL which overwrites the current document, you can use location.replace method as given below.

<a href="javascript:location.replace('https://siteforinfotech.com/p/javascript-programming-tutorials.html');">Open window using location.replace</a>

Like HTML event handler attributes, JavaScript URLs are a holdover from the early days of the web and generally avoided in modern HTML. JavaScript: URLs are very useful if you need to test a small snippet of JavaScript code. You can type a javascript: URL directly into the location bar of your browser. And another most powerful use of Javascript: URLs is in browser bookmarks.

Please follow and like us: