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.. =)

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:

<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

is there any shortest way to do it or another way.. =)

<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

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.