What does “javascript:void(0)” mean?

<a href="javascript:void(0)" id="loginlink">login</a>

I've seen such hrefs many times, but I don't know what exactly that means.



The void operator evaluates the given expression and then returns undefined.

The void operator is often used merely to obtain the undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).

An explanation is provided here: void operator.

The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined.


In addition to the technical answer, javascript:void means the author is Doing It Wrong.

There is no good reason to use a javascript: pseudo-URL(*). In practice it will cause confusion or errors should anyone try things like ‘bookmark link’, ‘open link in a new tab’, and so on. This happens quite a lot now people have got used to middle-click-for-new-tab: it looks like a link, you want to read it in a new tab, but it turns out to be not a real link at all, and gives unwanted results like a blank page or a JS error when middle-clicked.

<a href="#"> is a common alternative which might arguably be less bad. However you must remember to return false from your onclick event handler to prevent the link being followed and scrolling up to the top of the page.

In some cases there may be an actual useful place to point the link to. For example if you have a control you can click on that opens up a previously-hidden <div id="foo">, it makes some sense to use <a href="#foo"> to link to it. Or if there is a non-JavaScript way of doing the same thing (for example, ‘thispage.php?show=foo’ that sets foo visible to begin with), you can link to that.

Otherwise, if a link points only to some script, it is not really a link and should not be marked up as such. The usual approach would be to add the onclick to a <span>, <div>, or an <a> without an href and style it in some way to make it clear you can click on it. This is what StackOverflow [did at the time of writing; now it uses href="#"].

The disadvantage of this is that you lose keyboard control, since you can't tab onto a span/div/bare-a or activate it with space. Whether this is actually a disadvantage depends on what sort of action the element is intended to take. You can, with some effort, attempt to mimic the keyboard interactability by adding a tabIndex to the element, and listening for a Space keypress. But it's never going to 100% reproduce the real browser behaviour, not least because different browsers can respond to the keyboard differently (not to mention non-visual browsers).

If you really want an element that isn't a link but which can be activated as normal by mouse or keyboard, what you want is a <button type="button"> (or <input type="button"> is just as good, for simple textual contents). You can always use CSS to restyle it so it looks more like a link than a button, if you want. But since it behaves like a button, that's how really you should mark it up.

(*: in site authoring, anyway. Obviously they are useful for bookmarklets. javascript: pseudo-URLs are a conceptual bizarreness: a locator that doesn't point to a location, but instead calls active code inside the current location. They have caused massive security problems for both browsers and webapps, and should never have been invented by Netscape.)


It means it’ll do nothing. It’s an attempt to have the link not ‘navigate’ anywhere. But it’s not the right way.

You should actually just return false in the onclick event, like so:

<a href="#" onclick="return false;">hello</a>

Typically it’s used if the link is doing some ‘JavaScript-y’ thing. Like posting an AJAX form, or swapping an image, or whatever. In that case you just make whatever function is being called return false.

To make your website completely awesome, however, generally you’ll include a link that does the same action, if the person browsing it chooses not to run JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

There is a HUGE difference in the behaviour of "#" vs javascript:void

"#" scrolls you to the TOP of the page while "javascript:void(0);" does not.

This is very important if you are coding dynamic pages. the user does not want to go back to top just because he clicked a link on the page.


It is a very popular method of adding JavaScript functions to HTML links.
For example: the [Print] links that you see on many webpages are written like this:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Why do we need href while onclick alone can get the job done? Because when users hover over the text 'Print' when there's no href, the cursor will change to a caret (?) instead of a pointer (????). Only having href on an a tag validates it as a hyperlink.

An alternative to href="javascript:void(0);", is the use of href="#". This alternative doesn't require JavaScript to be turned on in the user's browser, so it is more compatible.


You should always have an href on your a tags. Calling a JavaScript function that returns 'undefined' will do just fine. So will linking to '#'.

Anchor tags in Internet Explorer 6 without an href do not get the a:hover style applied.

Yes, it is terrible and a minor crime against humanity, but then again so is Internet Explorer 6 in general.

I hope this helps.

Internet Explorer 6 is actually a major crime against humanity.


It's worth mentioning that you'll sometimes see void 0 when checking for undefined, simply because it requires less characters.

For example:

something === undefined


something === void 0

Some minification methods replace undefined with void 0 for this reason.


Usage of javascript:void(0) means that the author of the HTML is misusing the anchor element in place of the button element.

Anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a <button> instead. In general you should only use an anchor for navigation using a proper URL.

Source: MDN's <a> Page.


void is an operator that is used to return a undefined value so the browser will not be able to load a new page.

Web browsers will try and take whatever is used as a URL and load it unless it is a JavaScript function that returns null. For example, if we click a link like this:

<a href="javascript: alert('Hello World')">Click Me</a>

then an alert message will show up without loading a new page, and that is because alert is a function that returns a null value. This means that when the browser attempts to load a new page it sees null and has nothing to load.

An important thing to note about the void operator is that it requires a value and cannot be used by itself. We should use it like this:

<a href="javascript: void(0)">I am a useless link</a>

To understand this concept one should first understand the void operator in JavaScript.

The syntax for the void operator is: void «expr» which evaluates expr and returns undefined.

If you implement void as a function, it looks as follows:

function myVoid(expr) {
    return undefined;

This void operator has one important usage that is - discarding the result of an expression.

In some situations, it is important to return undefined as opposed to the result of an expression. Then void can be used to discard that result. One such situation involves javascript: URLs, which should be avoided for links, but are useful for bookmarklets. When you visit one of those URLs, many browsers replace the current document with the result of evaluating the URLs “content”, but only if the result isn’t undefined. Hence, if you want to open a new window without changing the currently displayed content, you can do the following:

javascript:void window.open("http://example.com/")

The void operator evaluates the given expression and then returns undefined. It avoids refreshing the page.


Web Developers use javascript:void(0) because it is the easiest way to prevent default behavior of a tag. void(*anything*) returns undefined and it is a falsy value. and returning a falsy value is like return false in onclick event of a tag that prevent its default behavior.

So I think javascript:void(0) is the simplest way to prevent default behavior of a tag.


A link must have an HREF target to be specified to enable it to be a usable display object.

Most browsers will not parse advanced JavaScript in an

<A HREF="" 

tag such as:

<A href="JavaScript:var elem = document.getElementById('foo');" 

because the HREF tag in most browsers does not allow whitespace, or will convert whitespace to %20, the HEX equivelent of a SPACE, which renders your JavaScript absolutely useless to the interpreter.

So if you want to use an A HREF tag to execute inline JavaScript, you must specify a valid value for HREF FIRST that isn't too complex (doesn't contain whitespace), and then provide the JavaScript in an event attribute tag like OnClick, OnMouseOver, OnMouseOut, etc.

The typical answer is to do something like this:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

This works fine but it makes the page jump to the top because of the pound sign/hash tag tells it to do so.

Just providing a pound sign/hash tag in an A HREF tag actually specifies the root anchor, which is always, by default the top of the page, you can specify a different location by using specifying the NAME attribute inside an A HREF tag.

<A NAME='middleofpage'></A>

You can then change your A HREF tag to jump to 'middleofpage' and execute the JavaScript in the OnClick event, once that happens like so:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

There will be MANY times where you do not want that link jumping around, so you can do two things:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

Now it will go nowhere when clicked, but it could cause the page to re-center itself from it's current viewport. This is not pretty. What is the best way to provide in-line javascript, using an A HREF, but without having to do any of the above? JavaScript:void(0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

This tells the browser to go NOWHERE, but instead execute the valid JavaScript:void(0); function first in the HREF tag because it contains no whitespace, and will not be parsed as a URL. It will instead be run by the compiler. VOID is a keyword which, when supplied with a perameter of 0 returns UNDEFINED, which does not use any more resources to handle a return value that would occur without specifying the 0 (it is more memory-management/performance friendly).

The next thing that happens is the OnClick gets executed. The page does not move, nothing happens display-wise.


JavaScript: URLs aside; this is where void can be useful to write shorter code.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here

Another example where is used javascript.void(0) . I'm not sure whether it is the correct way, but does the job

$(document).ready(function() {
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery("#" + thid_data).show();
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.