Question

I’m new to web-design and javascript, and I don’t understand why it’s common for web designers to use the void(0) syntax below:

 <a onclick="this.blur();return false;" href="javascript:void(0);" class="btn">

Since this actually shows itself in the lower left hand corner of the browser, why not come up with a way to make it more user friendly? Maybe it’s because designers don’t have the time to do this kind of UI tweaking.

What would you suggest as an alternative to the above syntax that would be more helpful to the end-user?

Answer 1

If it’s simply end-user helpfulness then this might do?

<a onclick="this.blur();return false;" href="#Click to hide" class="btn">

since you’re returning false anyway it could actually contain anything

<a onclick="this.blur();return false;" href="Click to hide" class="btn">

However, I think the reason for it is, if you have javascript disabled, it will actually have no effect, as opposed to writing something else there which will (the first example will change the hash/anchor-part of the url, the second will probably result in an error). Either way they’ll still look funny though (prepended with the original url).

Then again, if this thing is only visible due to javascript, I’d say go ahead and assume javascript is available. Although I’d still err on the safe side and use the hash anyway… 🙂

Edit:
I just realized not all browsers show the ‘#’ part of a href in the status-bar (does any browser do that?), so I’d use the javascript:void(0); or simply # if you’re not using anchors for anything, and set the title attribute to something descriptive instead.

Edit:
I think I was a bit too fast… I think the javascript:void is indeed to avoid having any effect. However, a better solution would to not use a-tags at all (I usually just slap the onclick onto anything, actually I usually use jquery, and add it to certain classes or IDs afterwards).