void(0) is EVIL!

[codagtr]

You may have heard about sticking 'javascript:void(0)' in the href attribute of the <a> tag so that you can put the actual function call in the onClick.

Let me tell you that this is really NOT a good thing. The void(0) prevents changes to image objects, and God knows what else...

More specifically, my function contained a document.img.src = statement. But the image would not load when the statement was executed!

Removing the void(0) and reinstating the function call in the href has made it better again.

remember: void(0) is EVIL!

[Jon Hanlon]

Utter Rubbish.

There is absolutely nothing wrong with, say,
<a href="javascript:void(0)" onclick="document.images.daffy.src='/images/DuckDodgers.gif'">Duck Dodgers</a>

But you need to understand a bit about what's going on.
Firstly the void() Operator. All expressions calculate a value - the expression "var months = 12;" for instance calculates the result 12. Sometimes, however, it's beneficial to just throw the result away. The void() Operator evaluates an expression, then returns undefined. So
var dwarves = 7;
alert( void(++dwarves) ) // shows 'undefined', not '8'

The javascript: URL is a special URL. Its job is to evaluate any Javascript following, and display the result in the browser unless the result is undefined.

Try it: In the Location bar of a browser, type in javascript:3+5
A page will appear, with '8' on it.
Now navigate to a page, and type
javascript:void(3+5)
Nothing happens.
For a bit more fun, try
javascript:window.weekDays=7
Here we are assigning the value 7 to a variable called 'weekDays'. A blank page with '7' on it will appear.
Now try
javascript:window.weekDays=undefined
Again, nothing will happen.
Now navigate to another page and type
javascript:window.smellySox
Nothing happens, because the smellySox variable is undefined.
Get the picture?

So when the link
<a href="javascript:void(0) onclick="....">
is clicked, the onclick() fires, and then the link tries to navigate to undefined, but it can't, so it stays put.

Note that there's nothing magical about the zero used as a parameter in void(0). void(a=7), void(99), void(-55), void(null) are all valid. You must, however, have something legal inside the brackets - as void() makes no sense.

[COBOLdinosaur]

I always use href="JavaScript:;"

Then a return false after the onclick prevents anything bad from happening.

Cd&

[Jon Hanlon]

Yes CD,
I usually return false from the onclick() as well.
Note that if you do this then you can put pretty much anything in as the href:
<a href="Swap:Daffy Image" onclick="...;return false">

Displays 'swap: Daffy Image' in the status bar.
(Not that I'd recommend this as a general practice...)

[codagtr]

Originally posted by jonhanlon
Utter Rubbish.


Just sharing my experience, Jon, I don't find it fair for you to say something like that.



There is absolutely nothing wrong with, say,
<a href="javascript:void(0)" onclick="document.images.daffy.src='/images/DuckDodgers.gif'">Duck Dodgers</a>


If there isn't, there should be. I experienced this first-hand. Nothing but snow-white space where the image was supposed to be. If void(0) is so harmless, then it shouldn't make any difference, now should it?

I do appreciate your explanation.

I'm still swearing off void(0), at least until the browsers do something different with it.

[Jon Hanlon]

I experienced this first-hand.


I'm not disputing this, codagtr.
All I'm saying is that it's not the void(0) that's responsible, especially if you add a 'return false' to the end of the onclick().

My only thought is that maybe the browser figures it's about to navigate to a new page anyway, so there's no point in swapping the image. Just an idea.
(Browsers don't render things on the page immediately you tell them to - they wait until it's convenient.)
If this is the case then you could get around it by using setTimeout("document.images.daffy.src='robinHood.gif'",0) as your onclick().

void(0) is a useful trick - I much prefer it to the other chestnut href="#" - and we shouldn't go around telling people it doesn't work.

If you like, why not post your code along with the browser version you're using so we can have a look?