using javascript:void(0) and onClick

[newbie85]

I have a page that has some sections that are available only with javascript. Please leave for now comments that I should make it available also without javascript.

The page has add details link. When user clicks it, it shows ajax pop up.

$("#addDetails").click(function...
<a href="javascript:void(0);" id="addDetails">Add details</a>

Is it ok to use javascript:void(0) or is there any better way (considering popup content can be accesses only with js)?

The above example done also with defining new fucntion and using onClick. Would be this still be considered as a proper way? Why some people are saying that I should not use onClick?

And if this is not a proper (best practice) way. What if user need to pass also some arguments, like the following?

<a href="javascript:void(0);" onClick="addDetails(1,3)">Add details</a>

[felgall]

The best way is to include the address of the page that you want those without JavaScript to see when they click on the link.

Even usung href="#" would be better as at least then clicking on the link without JavaScript will do something.

Alternatively if the link must definitely only work with JavaScript enabled replace the <a> with a <span> and use JavaScript to style the span so it looks like a link.

[Raffles]

Even if must only definitely work with JS on, it's better to use a link because then the user can tab to it with the keyboard. If it's not a link, then it's impossible to "click" it without a mouse.

[newbie85]

thank you. And as for onClick="addDetails(1,3), is there any reason why I should avoid using onClick?

[felgall]

thank you. And as for onClick="addDetails(1,3), is there any reason why I should avoid using onClick?

As it is JavaScript it is better placed in an external JavaScript file rather than cluttering your HTML with JavaScript.

Even if must only definitely work with JS on, it's better to use a link because then the user can tab to it with the keyboard. If it's not a link, then it's impossible to "click" it without a mouse.

It all depends on which group you prefer to have it broken for - the large group with JavaScript disabled or not available who will click on it and have nothing happen who will then curse you or the smaller group who don't have a mouse to be able to click on it (which will include a high percentage of people without JavaScript anyway).

[Raffles]

Then the solution is to create the element with JavaScript as well. If isn't going to do anything with JS disabled, it shouldn't be there.

[Ruben K.]

Do realize that using javascript:void(0) will cause insecure content warnings in some browsers (*cough* IE *cough*) if the page is https

[felgall]

Do realize that using javascript:void(0) will cause insecure content warnings in some browsers (*cough* IE *cough*) if the page is https

That is the least of the jmany problems that code causes - so trivial in comparison to all the other issues since most people who would receive such an alert would have plenty of other reasons for abandoning that web site regardless of what browser they are using.

As Raffles said - the best solution of it is JavaScript only is to insert the entire link with JavaScript. Then you can safely use href="#" in the knowledge that it will never be run.

If you absolutely must break the web page by including it for everyone even when it isn't going to work for everyone then the choice I mentioned with regard to who you are trying to annoy the most would determine how you do it - but you still wouldn't use javascript:void(0) regardless.

If you do feel like using javascript:void(0) then first write out the following line ten trillion times before you do.

href="javascript:void(0)" means "Go away you are too insignificant a microbe for me to take the effort to make my web page work properly for you".

[Stomme poes]

If it's not a link, then it's impossible to "click" it without a mouse.

Well, but if for whatever reason it needs to be some other element, there is always JS adding a negative tab index so it can add focus() itself for mouseless.

Personally I do the Let-JS-Create-The-Object because nothing's more frustrating as a user than having crap on a page that doens't work. Don't make promises to your users that you can't always keep. A link is a "promise" in usability.

[wasis]

sorry disturbing you mr., i have a problem with link..

i use ..a href="javascript:void(0)" to to disable my <div id="input"> and show my <div id="edit">, but the problem is when i must show <div id="edit">, i must bring an attribut in ..a href="javascript:void(0)", how to do it?

this is parts of the script..
<td><a href="agenda_kerja.php?id=<?=1?>;javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='block';document.getElementById('edit').style.display='block'">edit</a></td>