Any Shortest Way

yaseenyahya · 11-09-2012, 08:52 PM

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";
}

};

Old Pedant · 11-09-2012, 09:22 PM

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

Logic Ali · 11-09-2012, 11:51 PM

Quote:

Originally Posted by yaseenyahya

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>

Old Pedant · 11-09-2012, 11:55 PM

Slow day, LogicAli? <grin/>

Logic Ali · 11-10-2012, 12:09 AM

Quote:

Originally Posted by Old Pedant

Slow day, LogicAli? <grin/>

No it's memory-saving day. Don't generate multiple function bodies when one is adequate.

Old Pedant · 11-10-2012, 12:13 AM

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.