Open In App

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

Last Updated : 12 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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-123009
Output
Screenshot-2024-11-12-123031
Clicking Button
Screenshot-2024-11-12-123018
Clicking Link

Explanation:

  1. <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.
  2. 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:

Screenshot-2024-11-12-123226
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

A

anuragtriarna
Improve
Article Tags :

Explore

Lightbox