What Does javascript:void(0) Mean?

Last Updated : 29 Apr, 2025

javascript:void(0) is commonly used in HTML to create a link that doesn’t perform any action or navigate to a new page. When placed in the href attribute of an <a> tag, it allows the link to execute JavaScript code without reloading or changing the current page. This is particularly useful for triggering JavaScript functions while preventing the default behavior of navigating away from the current page.

Syntax

<a href="javascript:void(0)" onclick="JavaScriptFunction()">Click Here</a>

In the above syntax:

href="javascript:void(0)": This ensures that the link doesn’t navigate anywhere. It tells the browser to do nothing when the link is clicked.
onclick="JavaScriptFunction()": This part runs a JavaScript function (in this case, JavaScriptFunction()) when the link is clicked, without reloading or navigating away from the page.

Now let's understand this with the help of example:

HTML

<html>
<body>
    <a href="javascript:void(0)" onClick=
    "document.getElementById('demo').style.display='block'">
        Click to Show Message
    </a>
    <div id="demo" style="display:none;">
        <p>This is a hidden message that appears 
        when you click the link!</p>
    </div>
</body>
</html>

Output

In this code

Link (<a> tag): When the user clicks the link, the onClick event triggers a JavaScript function that changes the display property of the <div> with id="demo" from none (hidden) to block (visible).
The href="javascript:void(0)" ensures that clicking the link doesn't navigate to a new page.
Hidden <div>: Initially, the message inside the <div> is hidden (display:none). When the link is clicked, it becomes visible.

Components of javascript:void(0)

Below are the components of javascript:void(0), which help to understand how it works:

javascript: This tells the browser that the following code is written in JavaScript and should be executed as such, rather than being treated as a regular link.
void: The void operator is used to prevent any value from being returned. It ensures that the expression doesn't do anything that affects the webpage, like navigating or reloading.
(0): The 0 is just a value, but it doesn't matter in this case. The void operator makes sure that whatever value is inside the parentheses is ignored and doesn't affect the page.

Why Do Developers Use javascript:void(0)?

Developers use javascript:void(0) for a few reasons:

Prevent Page Navigation: When you click a link, it usually takes you to another page. But sometimes, developers don’t want that to happen. They want to run some JavaScript code instead, like opening a menu or showing a popup. javascript:void(0) stops the page from navigating away.
Trigger Actions Without Reloading: Sometimes a link or button is used to trigger a function, like showing hidden content or changing something on the page. By using javascript:void(0), the page doesn’t reload or change, and the desired action can still take place.
Improve User Experience: It helps in keeping the user on the same page while allowing interactions like animations, popups, or loading more content. This makes the website feel smoother and faster.

Alternative to javascript:void(0)

While javascript:void(0) is commonly used, there are a few alternatives that can achieve the same results

1. Using "#" in an anchor tag

It is the another way to prevent navigation is by using # in the link’s href attribute. The hash sign # refers to the current page, and clicking it won’t cause any real navigation:

html

<html>
<body>
    <a href="#" onClick="alert('Welcome to Geeks for Geeks')">
        Click on me
    </a>

</body>
</html>

2. Using event.preventDefault()

It is the more advanced method is to use JavaScript to cancel the default behavior of the link or button

HTML

<html>

<head>
    <script>
        function handleClick(event) {
            event.preventDefault();
            alert('Link clicked!');
        }
    </script>
</head>

<body>
    <a href="https://www.geeksforgeeks.com" 
        onclick="handleClick(event)">Click Me</a>
</body>

</html>

In this approach, event.preventDefault() is used within the onclick event handler to prevent the default action (navigating to a new page) and perform custom JavaScript actions. This method is more useful because it doesn't modify the href attribute.

When to Avoid javascript:void(0)?

Accessibility Issues: It can cause problems for screen readers and other assistive technologies.
SEO Problems: Search engines may not properly index links using javascript:void(0).
Unnecessary Complexity: For simple navigation, it adds unnecessary complexity. Use real URLs instead.
Browser History Issues: It doesn't update the browser history, which can interfere with navigation.
Semantic HTML: It misuses the <a> tag, which is meant for navigation. Use a <button> for actions instead.

Conclusion

javascript:void(0) allows links to run JavaScript without navigating away from the page, making it useful for actions like showing popups. However, it can cause accessibility and SEO issues, so alternatives like # or event.preventDefault() may be better in some cases. Always use it carefully to ensure a smooth user experience.

What does '...' mean in JavaScript?

AnasShamoon

Improve

Article Tags :