Problem
<a href="javascript:void(0)" id="loginlink">login</a>
I’ve encountered hrefs like this before, but I’m not sure what they signify.
Asked by omg
Solution #1
The following is an explanation of the void operator:
Because a javascript: URL generally redirects the browser to a plain text version of the result of evaluating that JavaScript, you’d want to do this with the href of a link. However, if the result is undefinable, the browser will remain on the same page. void(0) is a short and simple script that returns undefined when executed.
Answered by rahul
Solution #2
Aside from the technical answer, javascript:void indicates that the author is doing something incorrectly.
There’s no reason to use pseudo-URL(*) in javascript. When people try things like ‘bookmark link,’ ‘open link in new tab,’ and so on, it will generate confusion or issues. This happens a lot now that people are acclimated to middle-click-for-new-tab: it appears to be a link, and you want to read it in a new tab, but it turns out to be a fake link that opens a blank page or causes a JS error when middle-clicked.
a href=”#”> is a popular alternative that could be considered less awful. To prevent the link from being followed and scrolling to the top of the page, remember to return false from your onclick event handler.
In some circumstances, there may be a more appropriate location to direct the link to. It makes sense to utilize a href=”#foo”> to link to a previously-hidden div id=”foo”> if you have a control you can click on that brings up a previously-hidden div id=”foo”>. You can also link to a non-JavaScript way of doing the same thing (for example, ‘thispage.php?show=foo’, which makes foo visible right away).
Otherwise, a link that just points to a script isn’t actually a link and shouldn’t be marked up as one. Adding the onclick to a span>, div>, or a> without a href and styling it in some way to make it apparent you can click on it is the standard approach. StackOverflow used to do this [at the time of writing; currently it uses href=”#”].
The negative is that you lose keyboard control because you can’t tab or activate a span/div/bare-a with space. Whether or not this is a drawback depends on the type of operation the element is supposed to do. By adding a tabIndex to the element and listening for a Space keypress, you may try to imitate keyboard interactability with some effort. However, it will never be able to completely replicate real-world browser behavior, not least because different browsers respond to the keyboard in different ways (not to mention non-visual browsers).
If you absolutely want something that isn’t a link but can be activated with the mouse or keyboard, a button type=”button”> (or an input type=”button”> for simple textual contents) is the way to go. If you like, you can always use CSS to restyle it to look more like a link than a button. But, because it acts like a button, that’s how you should truly mark it up.
(*: at least in terms of site authoring.) They’re obviously useful for bookmarklets. Pseudo-URLs are a conceptual oddity in javascript: a locator that doesn’t point to a place but instead calls active code within the current location. They’ve produced major security issues for both browsers and webapps, and Netscape should never have invented them.)
Answered by bobince
Solution #3
It implies that it will do nothing. It’s a deliberate attempt to make the link ‘travel’ nowhere. However, this is not the proper method.
In fact, you should just return false in the onclick event, as follows:
<a href="#" onclick="return false;">hello</a>
It’s usually used when the link is doing something ‘JavaScript-y.’ For example, you may upload an AJAX form or replace an image. In that situation, simply return false from whichever function is being called.
To make your website truly wonderful, you’ll usually add a link that does the same operation if the visitor doesn’t want to execute JavaScript.
<a href="backup_page_displaying_image.aspx"
onclick="return coolImageDisplayFunction();">hello</a>
Answered by Noon Silk
Solution #4
It’s a popular way to include JavaScript functions in HTML links. For instance, the [Print] links on many webpages are written as follows:
<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>
Why do we require href when onclick can accomplish the job just fine? Because the cursor changes to a caret () instead of a pointer () when users hover over the text ‘Print’ when there is no href. Only the presence of the href attribute on an a tag qualifies it as a hyperlink.
The use of href=”#” as an alternative to href=”javascript:void(0);” This option is more compatible because it does not require the user’s browser to have JavaScript enabled.
Answered by Huy – Vuong Do Thanh
Solution #5
The behavior of # and javascript:void(0); is vastly different.
javascript:void(0); does not scroll you to the top of the page, but # does.
If you’re developing dynamic pages, this is crucial since users don’t want to be taken back to the top every time they click a link.
Answered by Salvin Francis
Post is based on https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean