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).

Summary:

javascript:void(0) is used to prevent navigation or reloads for clickable elements like links.
onclick attaches a JavaScript function or code that runs when the element is clicked.
Use these approaches to control the behavior of links and buttons in your web applications

Difference Between JavaScript Arrays and Objects

anuragtriarna

Improve

Article Tags :

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

Explanation:

Example of Using javascript:void(0) with onClick

Explanation:

When to Use javascript:void(0):

Alternative Approaches:

Summary:

Similar Reads

Thank You!

What kind of Experience do you want to share?

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

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