Open In App

Which href value should we use for JavaScript links, “#” or “javascript:void(0)” ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will know which “href” should be used for JavaScript when we can use “#” or “javascript:void(0)”. Let us understand it.

Using the ‘#’ value: The # is a fragment identifier used to refer to a specific section of the same document. When a user clicks a link with a # href, the browser will scroll to that section of the page specified by the fragment identifier. 

This behavior is useful when you want to create a link that expands or collapses content on the same page. For example, you might have a button that displays more information about a topic when clicked. You could link this button to an anchor tag that has a # href value, and use JavaScript to show or hide the additional information.

However, using # as a JavaScript link has a downside. If the fragment identifier does not exist on the page, clicking the link will do nothing, and the page will not scroll. This behavior can be confusing for users who expect clicking a link to take them to another page or perform an action.

Syntax:

<a href="#">Link 1</a>

Using the ‘javascript:void(0)’ value: On the other hand, javascript:void(0) is a way to create a link that does nothing when clicked. This can be useful when you want to create a link that triggers a JavaScript function or event but does not navigate to another page. For example, you might have a button that submits a form or opens a modal dialog when clicked. You could link this button to an anchor tag that has a javascript:void(0) href value, and use JavaScript to handle the button click event.

Using javascript:void(0) as a JavaScript link has a benefit over #. Since the link does not navigate to another page, there is no chance of confusing the user if the fragment identifier does not exist. Additionally, using javascript:void(0) ensures that the browser does not attempt to load a page, which can improve performance.

However, using javascript:void(0) as a JavaScript link also has a downside. If the user has disabled JavaScript in their browser or has a browser that does not support JavaScript, clicking the link will do nothing, and the desired action will not occur.

Syntax:

<a href="javascript:void(0)">Link 2</a>

Example 1: Using “#” as the “href” value

Let’s say you have a web page with a list of items, and you want to add a button next to each item that allows the user to remove the item from the list. The HTML code for this might look like this:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h2>Welcome To GFG</h2>
    <ul>
        <li>Item 1 <a href="#" 
            class="remove-item">Remove</a>
        </li>
        <li>Item 2 <a href="#" 
            class="remove-item">Remove</a>
        </li>
        <li>Item 3 <a href="#" 
            class="remove-item">Remove</a>
        </li>
    </ul>
</body>
  
</html>


In this example, the “href” value for each “Remove” link is set to “#”. When a user clicks on one of these links, the browser will reload the current page, which is not what we want. To make sure the link performs the desired action of removing an item from the list, we need to add some JavaScript code that executes when the link is clicked.

Output:

 With HTML

Example 2: Using “javascript:void(0)” as the “href” value. In this example, we want the button to execute some JavaScript code when it is clicked, without reloading the page. To achieve this, we can set the “href” value of the button to “javascript:void(0)”:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h2>Welcome To GFG</h2>
      
    <button class="show-message" 
        href="javascript:void(0)">
        Show Message
    </button>
</body>
  
</html>


Output:

\



Last Updated : 16 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads