Simplifying some simple code

**dog** · 03-29-2008, 05:40 PM

Hello!

Here's a simple bit of code.

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:

HTML Code:

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

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

HTML Code:

    <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:

HTML Code:

   <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:

HTML Code:

<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:

HTML Code:

<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

Code:

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:

HTML Code:

<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

Code:

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

Code:

// 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:

Code:

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.

Code:

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.

Thread: Simplifying some simple code

Thread Tools

Search Thread

Simplifying some simple code

The Following User Says Thank You to thetestingsite For This Useful Post:

The Following User Says Thank You to Trinithis For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions