JavaScript

javascript:void(0)

Hello. In this tutorial, we will create a simple HTML page and understand the use of the javascript:void(0).

You can also check this tutorial in the following video:

JavaScript Tutorial for Beginners – Video

1. Introduction

1.1 What is a Javascript

It is lightweight object-oriented programming used for scripting HTML pages. It helps users to build modern applications by directly modifying the HTML and CSS to enhance the user interface with a DOM API.

1.2 What is javascript:void(0)

The void operator will evaluate the expression and returns an undefined. The javascript:void(0) is used when a developer does not want the page to be refreshed or load a new page in the browser by clicking on a hyperlink. It is represented by the below syntax.

Syntax

javascript:void(0);

2. javascript:void(0)

To set up the application, we will need to navigate to a path where our project will reside and I will be using Visual Studio Code as my preferred IDE. Let a take a quick peek at the project structure.

2.1 Setting up HTML page

In the below HTML file we are defining a clickable link where we are using the void(0); keyword. When a user clicks on this link it will do nothing.

jsvoidzero.html

<html>
  <head>
    <title>Index</title>
    <style>
      .dec-non {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <h2>Good morning world!</h2>
    <h3>Example of <i>javascript:void(0);</i></h3>
    <a id="nullid" href="javascript:void(0);" class="dec-non">
      <span>It will do nothing</span>
    </a>
  </body>
</html>

3. Demo

Double click on the html file and it will open the page in the browser. Now when the user clicks on the link it will do nothing because of javascript:void(0) keyword.

Fig. 1: Application output page

That is all for this tutorial and I hope the article served you with whatever you were looking for. Happy Learning and do not forget to share!

4. Summary

In this tutorial, we learned about javascript:void(0) keyword and created a simple HTML application. You can download the source code from the Downloads section.

5. Download the Project

This was a tutorial to understand the javascript:void(0) keyword.

Download
You can download the full source code of this example here:

Yatin

An experience full-stack engineer well versed with Core Java, Spring/Springboot, MVC, Security, AOP, Frontend (Angular & React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button