While surfing the web, you might come across many links and buttons. In most cases, clicking on these links will take you to a certain page within the website. It might also redirect you to another page of a different website. This is done for you to gather more information about a topic.
But when you are writing some JavaScript for a website, you might not want that to happen. You might want the user to click on a certain link but stay on that page without reloading it or directing them to another page. This can be is possible by using javascript: void(0).
What do you mean by javascript: void(0)?
The javascript:void(0) is often used while creating HTML documents. This is used when an expression in the web page can lead to an undesired effect. This can be loading a new web page. In such situations, adding javascript:void(0) to the HTML document will remove this effect.
The void operator returns a null value so that the browser does not load a new web page. This utility comes in handy when you want to perform useful actions on the web page. This can be updating certain values on the page by clicking on a link.
Here is a simple example of using javascript:void(0):
<a href="javascript: void(0)">An example link</a>
This will display something like:
An example link
We will see the different uses of the javascript: void(0) method in the upcoming sections of the article.
How to Use onclick with javascript: void(0)?
The onclick attribute is usually associated with an HTML button. This means that an event or an action will occur when you click on that button. In JavaScript, onclick is an event that occurs when you click on an HTML element, such as a button.
This attribute is used along with javascript: void(0) to prevent a page from reloading. Let us look at an example:
<!doctype html>
<html>
<head></head>
<body>
<a href="javascript:void(0);" onclick="alert('Page will not reload')">Click me</a>
</body>
</html>
Output:
When this code is executed, an alert box will be displayed with the message “Page will not reload”. But the javascript: void(0) will prevent the page from refreshing or reloading.
What to do when href="javascript: void(0)" is Not Working?
If the href=” javascript: void(0)” does not work, you can use the href=”#” inside an anchor tag. Your JavaScript function must return False. This will remove the default action of the element on the web page.
Use of “javascript: void(0)” on a Web Page?
As mentioned earlier, the javascript: void(0) is a function used for instructing the web page to not follow its usual path of action. This effective when an event such as a button click is encountered or when you click on a link.
Difference Between void() and void(0)
The void is a unary operator in JavaScript. It usually appears before a single operand. This void() operator is used for mentioning an expression that will be evaluated. But this expression will not return a value. This operator will execute an expression ad will return undefined.
Now let us understand void(0). You might pass a unary expression 0 along with the void() to make it void(0). JavaScript reads the 0 as False and the value has no effect on the code. Thus, this is used in JavaScript for halting an action such as loading a page or refreshing a page.
void(0) means "do nothing"
You may occasionally encounter an HTML document that uses href="JavaScript:Void(0);" within an < a > element.
<a href="javascript:void(0)">Link</a>
Example 1: Javascript:void (0) in Anchor Tag:
<html>
<body>
<a href="javascript:void(0); alert('Hello Link Clicked')">Click Here</a>
</body>
</html>
Output:
Example 2 : Javascript: void (0) in Anchor Tag Along With ‘onclick’
<html>
<body>
<a href="javascript:void(0)" onclick="alert('Hello Link Clicked')" )>Click Here</a>
</body>
</html>
Output:
Example 3: Anchor Tag Without Javascript void (0):
<html>
<body>
<a href="https://www.stechies.com/" onclick="alert('Hello Link Clicked')" )>Click Here</a>
</body>
</html>
Output:
In the above example, we did not used the javascript void(0). So when we click on the link “click here”. An alert with pop-up appears. And after clicking the “OK” button the current page will redirect us to our website “stechies.com”.
Example 4: “#” in Anchor Tag:
<html>
<body>
<p>TOP</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Bottom</p>
<p><a href="#" onclick="alert('Hello Link Clicked')" )>Click Here</a></p>
</body>
</html>
Output:
In the above example, if we click on the link a pop-up will appear. After clicking the OK button the page will slide up and reach the top of the web page. This is not a very desirable outcome.
When you click on the link, the code within it instructs it to display a message in an alert box (and this action does take place). The page will then scroll to the top automatically.
To prevent the page from reloading or going back to the top, we can use JavaScript: void(0); within the anchor link.
Example 5: “#” in an Anchor Tag and “return false”
The scroll-to-top-of-page behavior can be suppressed if the event handler returns false. You can do something like onclick="doSomething(); return false;". If doSomething() returns false, you can use onclick="return doSomething();
Check out this code below:
<html>
<body>
<p>TOP</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Bottom</p>
<p><a href="#" onclick="alert('Hello Link Clicked'); return false;" )>Click Here</a></p>
</body>
</html>
In the above example, after an alert message box appears, the page won’t scroll to the top.
Use of javascript void(0) in different javascript libraries and its alternatives
1) javascript void(0) in jquery:
jQuery is a JavaScript library that is used for making life simple for programmers when working with HTML DOM elements. So the importance of javascript: void(0) is the same, i.e. preventing default behaviour of an element.
To prevent a page from reloading or a new link from opening in jQuery, use the event.preventDefault() method. The following code will do the trick:
$("go_button").click(function(event){
event.preventDefault();
});
2) javascript void (0) in react:
To prevent the default behaviour of a web page, you might face problems while using javascript: void(0) to React. For this JavaScript library, you can use the event.preventDefault() method. You can call this method from the onClick event.
3) javascript:void(0) alternative:
The first alternative to javascript:void(0) is the <a href= ‘#’ >. But in some cases, clicking on an element that has this attribute, might take you to a part of the web page you do not want to. You might reach the top or the bottom of the page. To avoid this, you have to make sure that the onClick=”return False”. The script also has to return False.
In the case of Backbone and Single Page Application websites, you can use the event.preventDefault(). This will prevent the default action. This can be opening a new link or reloading the page.
Conclusion
The javascript: void(0) functionality is great for preventing unwanted results such as a page reload or redirection. For some reason, if we don’t want to use javascript:void(0) then we can use “#” in an anchor tag and return false. As both does the same work. Using javscript:void( ) will raise a syntax error. And “return alert” will make the page scroll to the top.
You can consider these the best practices
- <a href="#" onclick="alert('Alert msg'); return false;" )>Click Here</a>
- <a href="javascript:void(0); alert(Alert msg')">Click Here</a>