The void operator is utilized to assess an expression and yield an undefined outcome. Its primary purpose is to acquire the undefined primitive value. This operator is commonly employed in conjunction with hyperlinks. Normally, when a link is clicked, the browser either refreshes the current page or opens a new one. To prevent this behavior, one can opt for using javascript:void(0) in the hyperlink action to avoid refreshing or loading a new page in the browser.
There are two ways to utilize the operand 0: void(0) or void 0. Both methods function identically. In JavaScript, :void(0) instructs the browser to refrain from any action, effectively preventing page reloading or refreshing. This technique proves beneficial when incorporating essential links within a webpage to avoid reloading. By applying void(0) to these links, the page is prevented from reloading while still enabling the execution of critical functions like updating values on the webpage.
It is also employed to deter undesired redirection of the webpage.
Syntax
void expression;
Let's explore the application of the javascript:void(0); method through a few illustrative examples.
Example1
In this instance, we will be creating two hyperlinks. The initial hyperlink uses the void keyword. Clicking on this particular hyperlink will result in no action as it is set to void(0).
Upon clicking the second hyperlink, an alert dialog box will be presented.
<html>
<head>
</head>
<body>
<center>
<h1> Hello World :) :) </h1>
<h2> Click the following links to see the changes </h2>
<h4> It is an example of using the <i> javascript:void(0); </i> </h4>
<a href = "javascript:void(0);">
It will do nothing.
</a>
<br/><br/>
<a href = "javascript:alert('Welcome to our tutorial');"> Click here for an alert </a>
</center>
</body>
</html>
Output
Upon selecting the initial link, no action will occur. However, upon clicking the subsequent link, the following output will be displayed -
Now, let's explore in the following example how to avoid redirecting the webpage.
Example2
In this instance, we are assigning the javascript:void(0); and the website link to the href attribute of a hyperlink. Additionally, the ondblclick attribute is employed to trigger an alert message upon double-clicking the hyperlink. Following the closure of the alert box, the webpage will not navigate to the designated website link.
<html>
<head>
<style>
a{
font-size: 22px;
}
</style>
</head>
<body>
<center>
<h1> Hello World :) :) </h1>
<h2> Click the following link to see the changes </h2>
<h4> You can see on closing the alert dialog box, the page will not redirect to https://logic-practice.com/ </h4>
<a href = "javascript:void(0);https://logic-practice.com/" ondblclick = "alert('Welcome to the logic-practice.com')">
Double click the link
</a>
</center>
</body>
</html>
Output
Upon performing a double-click action on the designated hyperlink, the result displayed will be -