PDA

View Full Version : Simplifying some simple code


dog
03-29-2008, 05:40 PM
Hello!

Here's a simple bit of code.


function selectLink(elementName) {

obj = document.getElementById(elementName);
obj.className = "selected";

}

It adds the class 'selected' to a link in my menu.

I call it when the pages loads, like this:

<body onload="selectLink('aboutLink1')">

It works because I've given the links IDs, like this:


<ul class="greyMenu1">
<li><a href="../about" id="aboutLink1">About</a></li>
<li><a href="../contact" id="contactLink1">Contact</a></li>
<li><a href="../purchase" id="purchaseLink1">Purchase</a></li>
</ul>

The thing is, I've got another menu that I also want to use the javascript on, it looks like this:


<ul class="greyMenu1">
<li><a href="../about" id="aboutLink2">About</a></li>
<li><a href="../contact" id="contactLink2">Contact</a></li>
<li><a href="../purchase" id="purchaseLink2">Purchase</a></li>
</ul>

So, in the onload command I'm calling the javascript once for the first menu and once for the second, like this:

<body onload="selectLink('aboutLink1'),selectLink('aboutLink2')">

What I'd like to do is change the javascript so that it can deal with both the elements at once. Effectively I'd like to reduce my HTML to this:

<body onload="selectLink('aboutLink1','aboutLink2')">

However, I don't know how to change the javascript to have it deal with more than one element in one go. If anyone knows how, I would really appriciate the lesson.

Thanks,

Dog
thetestingsite
03-29-2008, 05:42 PM
function selectLink(Eone, Etwo) {

document.getElementById(Eone).className = 'selected';
document.getElementById(Etwo).className = 'selected';
}


Hope this helps.
dog
03-29-2008, 05:54 PM
Wow that was amazingly fast and it works too!

It even works if I only define one element, like this:

<body onload="selectLink('aboutLink2')">

...does doing this cause any errors? Doesn't the javascript expect to recieve two elements?

Another question, just for the sake of learning a bit more about javascript:

Assuming I had a massive (and variable) number of elements to deal with, as opposed to always having just two, what alternative code could be used?

Thanks again.
Trinithis
03-29-2008, 08:20 PM
function selectLink(/*ids*/) {
for(var i = arguments.length - 1; i >= 0; --i)
document.getElementById(arguments[i]).className = "selected";
}




// examples

selectLink(); // nothing
selectLink("id1");
selectLink("id2", "id3");
selectLink("id4", "id5", "id6");

var idArray = [/*bunch of ids*/];
selectLink.apply(null, idArray);
dog
03-29-2008, 09:10 PM
Your code is very good. Thank you!

I put just the first bit in place:



function selectLink(/*ids*/) {
for(var i = arguments.length - 1; i >= 0; --i)
document.getElementById(arguments[i]).className = "selected";
}

To be quite honest I didn't understand the second section of code and I'm not sure what I should do with it.

Please, if anyone is of a mind to, feel free to explain any of this code to me.

Eitherway, thanks a lot for all the help. Aside from a bit of increased understanding I've got just what I was looking for.

Peace out
Trinithis
03-29-2008, 09:17 PM
You can pass any number of arguments to a javascript function.

arguments is an array (technically, just array-like) structure that stores each argument passed to the function.


arguments.length == the number of arguments passed to the function.

arguments[0] == the first argument (if any)
arguments[1] == the second argument (if any)
. . .
arguments[argument.length-1] == the last argument (if any)
dog
03-29-2008, 10:14 PM
Cool! Thanks man.