How to Use JavaScript: void(0) and onClick?

Last Updated : 12 Nov, 2024

Using javascript:void(0) in combination with the onClick attribute is a technique used in HTML to create links or clickable elements that perform actions without navigating away from the page. This is common when you want to attach a JavaScript function or event handler to a clickable element but prevent the default behavior of links (such as following an href).

Explanation:

javascript:void(0) is an expression that evaluates to undefined and effectively does nothing. It is used to prevent the default action of the link (<a> element) when clicked.
onClick is an HTML attribute that allows you to attach a JavaScript event handler to an element, so a function or block of code is executed when the element is clicked.

Example of Using `javascript:void(0)` with `onClick`

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Using javascript:void(0) with onClick</title>
</head>
<body>
  <!-- Anchor tag using javascript:void(0) with an onClick event -->
  <a href="javascript:void(0)" onclick="alert('Link clicked!')">Click me</a>

  <script>
    function handleClick() {
      alert('Button clicked!');
    }
  </script>

  <!-- Button using onClick directly -->
  <button onclick="handleClick()">Click this button</button>
</body>
</html>

Output:

Screenshot-2024-11-12-123031 — Clicking Button

Screenshot-2024-11-12-123018 — Clicking Link

Explanation:

<a href="javascript:void(0)">:
- href="javascript:void(0)" ensures that clicking the link does not trigger navigation or reload the page.
- onclick="alert('Link clicked!')" runs a JavaScript function or code when the link is clicked.
onclick Attribute on Button:
- You can attach JavaScript functions directly to buttons or other elements using the onclick attribute, as demonstrated with the <button> element.

When to Use `javascript:void(0)`:

Prevent Default Navigation: It’s often used to prevent <a> tags from following a URL when clicked, allowing you to handle the click event with JavaScript instead.
Single Page Applications (SPAs): Frequently used in SPAs where page reloads are generally avoided.

Alternative Approaches:

Instead of using javascript:void(0), you can use # as the href attribute to create a "dummy" link. However, this may cause the page to scroll to the top, so you need to prevent the default behavior explicitly:

HTML

<a href="#" onclick="event.preventDefault(); alert('Link clicked!')">Click me</a>

Output:

event.preventDefault() prevents the default action (in this case, navigating to the top of the page).