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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post

    Any Shortest Way

    I have a 5 text in white color in <anchor tag> when i click 1 it changes to "orange" And when i click 2...except this 2 al changes to white..and so on...is there any shortest way to do it or another way.. =)
    Code:
    window.onload = function(){
      var as = document.getElementsByTagName("a");
    
       as[0].onclick = function(){
        this.style.color = "orange";
        as[1].style.color = "white";
        as[2].style.color = "white";
        as[3].style.color = "white";
        as[4].style.color = "white";
        }
        as[1].onclick = function(){
        this.style.color = "orange";
        as[0].style.color = "white";
        as[2].style.color = "white";
        as[3].style.color = "white";
        as[4].style.color = "white";
      }
      as[2].onclick = function(){
        this.style.color = "orange";
        as[0].style.color = "white";
        as[1].style.color = "white";
        as[3].style.color = "white";
        as[4].style.color = "white";
      }
      as[3].onclick = function(){
        this.style.color = "orange";
        as[0].style.color = "white";
        as[2].style.color = "white";
        as[1].style.color = "white";
        as[4].style.color = "white";
    }
    as[4].onclick = function(){
        this.style.color = "orange";
        as[0].style.color = "white";
        as[2].style.color = "white";
        as[3].style.color = "white";
        as[1].style.color = "white";
    }
    
    };

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Well, for starters, if you moved that code to *AFTER* the bulk of the HTML, to just before the </body>, then you wouldn't need the window.onload.

    Like this:
    Code:
    <html>
    <body>
    <a ... >
    <a ... >
    <a ...>
    <a ...>
    
    <script type="text/javascript">
    (
      function( ) /* anonymous master function */
      {
          var as = document.getElementsByTagName("a");     
          for ( var a = 0; a < as.length; ++a )
          {
              as[a].onclick = 
                  function( )
                  {
                      // change all but the one clicked on to white
                      for ( var n = 0; n < as.length; ++n )
                      {
                           as[n].style.color = ( as[n] == this ) ? "orange" : "white";
                      }
                 } // end of onclick function
    
          } // end of for loop
    
      } // end of anonymous master function
    
    )( ); // self-invoked the master function
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by yaseenyahya View Post
    is there any shortest way to do it or another way.. =)
    Code:
    <script type="text/javascript">
    
    (function() /* Place BELOW all <a> tags */
    {
      var as = document.getElementsByTagName("a");
    
      for( var i = 0; as[ i ]; i++ )
        as[ i ].onclick = f;
    
      function f()
      {
        for( var i = 0; as[ i ]; i++ )
          as[ i ].style.color = ( as[ i ] === this ? "orange" : "white" );   
      }
    })();
    
    </script>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Slow day, LogicAli? <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    Slow day, LogicAli? <grin/>
    No it's memory-saving day. Don't generate multiple function bodies when one is adequate.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Oh, I see your point.

    Funny thing is, when I write code for myself I almost always do it the way you showed, even if the function will only be called once.

    I prefer the self-documenting nature of the resultant code.

    But when I post in the forums, I tend to write the shortest code rather than necessarily most efficient. Mostly because I'm lazy, I guess.

    Anyway, you should have pointed out WHY you rewrote my code, to educate the poster(s). Glad you did so now.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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