SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using javascript:void(0) and onClick

    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.
    HTML Code:
    $("#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?
    HTML Code:
    <a href="javascript:void(0);" onClick="addDetails(1,3)">Add details</a>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you. And as for onClick="addDetails(1,3), is there any reason why I should avoid using onClick?

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by newbie85 View Post
    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.

    Quote Originally Posted by Raffles View Post
    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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do realize that using javascript:void(0) will cause insecure content warnings in some browsers (*cough* IE *cough*) if the page is https

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ruben K. View Post
    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".
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •