Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript:void(0) confusion

    newbie here. Looking at examples I always see action commands within the anchor tag when javascript:void(0) is involved. e.g.
    Code:
    <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
    So it's apparent that the javascript gets executed from the 'onclick' action. But I sometimes see the same tag with NO obvious action to take - even though somehow script gets executed. And I don't know how. For example, http://technet.microsoft.com/en-us/s...ive?y=2012&m=2 has links on the right hand side of the page for the years 2012 through 2004. Here is one of those elements:
    Code:
     <li> <a href="javascript:void(0)"> 2010 </a> </li>
    Can someone explain to me how the javascript gets executed when this element (i.e. '2010') is clicked?
    Last edited by skippyV; 03-21-2012 at 02:40 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    it's a combo of semantic coding in your html ( you basically design your pages as if javascript didnt exist) and javascript (progressive enhancement). It uses javascript to your advantage

    heres an example:

    http://www.thefutureoftheweb.com/blo...ions-in-a-loop

    https://developer.mozilla.org/en/DOM/element.onclick
    Last edited by DanInMa; 03-21-2012 at 03:24 AM.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I looked at both webpages you referenced. They both talk about "onclick" - which I understand (to some degree). It is the second example I listed which I don't understand.
    <li> <a href="javascript:void(0)"> 2010 </a> </li>
    The webpage that contains the above element has no "onclick" within the javascript.
    http://technet.microsoft.com/en-us/s...ive?y=2012&m=2

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Code:
    <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
    This is a bad, bad way of running javascript from an <a>.

    href is meant to be used as a pointer to a url to navigate to when the link is clicked, not for running javascript.

    Bets practice nowadays for running javascript from an <a> is something like this:

    Code:
    <a href="" onclick="myFunction(); return false;">Run myFunction</a>
    The onclick should also be set in separate js and not inline like here but that's another issue and I'm trying to use KISS as much as possible for now.

    The return false; stops the link from executing its default action of navigating to a url in the href after the function has finished running.

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm glad I'm getting feedback. But this question is an attempt to understand existing code - the example is from technet.microsoft.
    I'm just trying to get help in figuring out how they can cause an action using
    Code:
    <li> <a href="javascript:void(0)"> 2010 </a> </li>
    It's a bone I just can't let go. I know its not magic but I don't see how this code can work.

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by skippyV View Post
    I'm glad I'm getting feedback. But this question is an attempt to understand existing code
    Let google be your friend and google "void(0) javascript"

    Scroll down this page a bit and it'll save me some typing.

    But like I said earlier, javascript:void(0) should not be used and is so 20th century .
    Last edited by webdev1958; 03-21-2012 at 06:04 AM.

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Google is my friend. Forums are more of a last resort from frustration.
    That tutorial I've read before. The first example shows code identical to what I've posted - but its version does nothing. While the page at technet does something! The 2nd example of that tutorial has the action of the javascript within the tag itself - like I said that makes sense. But the example I'm referencing does not have anything of the sort.
    As for it being "so 20th century" - maybe so. But I'm not looking for a method to accomplish a goal. I'm just trying to move forward in my learning process and it's difficult when I come across something that doesn't make sense - but works!

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by skippyV View Post
    While the page at technet does something!
    The link you posted will do nothing on it's own.

    If the same link on the technet page actually does something then there is something else that you haven't posted in the page's code that's doing it. They probably have an onclick event handler assigned to the link somewhere in their javascript.

    They should modernise their code and ditch that javascript: void(0) malarkey because it's not needed at all.

    I don't have time atm to go through technet's code to try to work out what their 20th century code is doing.

    Hopefully someone else will come along to look for you at what they have done
    Last edited by webdev1958; 03-21-2012 at 06:50 AM.

  • Users who have thanked webdev1958 for this post:

    skippyV (03-21-2012)

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Breaking the <a> tag by placing JavaScript in the href attribute (which is supposed to be the part that works for people without JavaScript) is a good way to drive people away from your site.

    It is one of the BAD parts of JavaScript that any JavaScript beginner soon learns to avoid. Only those who don't know ANY JavaScript at all would ever use it.

    There is no confusion - you either learn JavaScript OR you use garbage like that and don't bother about even trying to learn JavaScript.

    See http://javascriptexample.net/badjs01.php for a detailed explanation of why JavaScript doesn't normally belong in the href attribute and the one situation where you would put JavaScript there - but never void(). It's so bad it is number one on the list of bad bits in JavaScript.
    Last edited by felgall; 03-21-2012 at 08:56 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by skippyV View Post
    newbie here. Looking at examples I always see action commands within the anchor tag when javascript:void(0) is involved. e.g.
    Code:
    <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
    So it's apparent that the javascript gets executed from the 'onclick' action. But I sometimes see the same tag with NO obvious action to take - even though somehow script gets executed. And I don't know how. For example, http://technet.microsoft.com/en-us/s...ive?y=2012&m=2 has links on the right hand side of the page for the years 2012 through 2004. Here is one of those elements:
    Code:
     <li> <a href="javascript:void(0)"> 2010 </a> </li>
    Can someone explain to me how the javascript gets executed when this element (i.e. '2010') is clicked?
    They are using code similar to this ...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
     <html lang="en">
     <head> 
     <style>
        
     </style>
     <script type = "text/javascript">
       
       </script>
     </head>
     <body>
    <ul>
      <li> <a href="javascript:void(0)"> 2010 </a> </li>
      <li> <a href="javascript:void(0)"> 2011 </a> </li>
      <li> <a href="javascript:void(0)"> 2012 </a> </li>	
    </ul>
      </body>
      <script>
      var A = document.getElementsByTagName("UL")[0].getElementsByTagName("A");
      for(var i = A.length;i--;){
    	A[i].onclick = function(){alert(this.innerHTML)};
    }
      </script>
    </html>
    Last edited by DaveyErwin; 03-21-2012 at 12:19 PM.

  • Users who have thanked DaveyErwin for this post:

    skippyV (03-21-2012)

  • #11
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by DaveyErwin View Post
    They are using code similar to this ...
    and according to best practice consensus they should ditch the javascript: void(0) and do something like this

    PHP Code:
        <body>
            
            <
    ul>
                <
    li> <a href=""2010 </a> </li>
                <
    li> <a href=""2011 </a> </li>
                <
    li> <a href=""2012 </a> </li>    
            </
    ul>

            <
    script type="text/javascript">
                var 
    document.getElementsByTagName("UL")[0].document.getElementsByTagName("A");
                for(var 
    A.length;i--;){
                    
    A[i].onclick = function(){
                        
    alert(this.innerHTML);
                        return 
    false;
                    }
                }
            
    </script>
            
        </body> 

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by webdev1958 View Post
    and according to best practice consensus they should ditch the javascript: void(0) and do something like this

    PHP Code:
        <body>
            
            <
    ul>
                <
    li> <a href=""2010 </a> </li>
                <
    li> <a href=""2011 </a> </li>
                <
    li> <a href=""2012 </a> </li>    
            </
    ul>

            <
    script type="text/javascript">
                var 
    document.getElementsByTagName("UL")[0].document.getElementsByTagName("A");
                for(var 
    A.length;i--;){
                    
    A[i].onclick = function(){
                        
    alert(this.innerHTML);
                        return 
    false;
                    }
                }
            
    </script>
            
        </body> 
    if they used that code it would fail in FireFox

  • #13
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by DaveyErwin View Post
    if they used that code it would fail in FireFox
    That's because in your code you originally had

    var A = document.getElementsByTagName("UL[0].document.getElementsByTagName("A");

    which I copied and pasted


    This works fine in FF11.

    Code:
    
        <body>
            
            <ul>
                <li> <a href=""> 2010 </a> </li>
                <li> <a href=""> 2011 </a> </li>
                <li> <a href=""> 2012 </a> </li>    
            </ul>
    
            <script type="text/javascript">
                var A = document.getElementsByTagName("UL")[0].getElementsByTagName("A"); 
                for(var i = A.length;i--;){
                    A[i].onclick = function(){
                        alert(this.innerHTML);
                        return false;
                    }
                }
            </script>
            
        </body>


    The purpose of my post was to illustrate the demo I posted earlier in the thread
    without void(0) in the href and the function of return false;

    Last edited by webdev1958; 03-21-2012 at 01:15 PM. Reason: tried to change green to black - no success :(

  • #14
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    There is no confusion -
    If there wasn't confusion - mine -then this post wouldn't exist.
    Quote Originally Posted by felgall View Post
    you either learn JavaScript OR you use garbage like that and don't bother about even trying to learn JavaScript.
    I always thought forums like this existed so that experienced users can help out the newbies like me. This IS part of my attempt to learn JavaScript. And with that learning comes the need to understand existing script. It's good to learn the good and bad practices. Seeing a piece of "bad" code, understanding its mechanism and being told that this mechanism is bad programming practice is different than - seeing a piece of "bad" code, NOT understanding its mechanism and being told "learn JavaScript OR ... don't bother trying". That kind of response is unhelpful at best.
    Fortunately for me, and I'm sure other posters, people like webdev1958 and felgall have the patience and time to provide the assistance I needed.
    To them I say thanks! I now know what to look for in understanding this code and eliminating my confusion.
    I don't see a "points" mechanism for submitting credit for a correct response - if I find one you both deserve the credit.

  • #15
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by skippyV View Post
    To them I say thanks! I now know what to look for in understanding this code and eliminating my confusion.
    I don't see a "points" mechanism for submitting credit for a correct response - if I find one you both deserve the credit.
    no problem and there is a "thanking" and "reputation points" system on this website but I pay no attention to it because it is very easy to manipulate and abuse since friends of members, or anybody really, can simply go round threads and click posts to boost the members' thanks and reputation points. There is no way of knowing how many points are genuine or not so for me they are useless.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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