Javascript function to switch Classes???

[Robbins]

So basically, I am wondering whats wrong here.... I have 4 links inside table cells and each has a class assigned. the tab that is active is assigned "sel" while the others are "nav" ... what i'm trying to do is have them switch classes without changing the page using javascript. I did some ugly code below since i don't completely know javascript. Each link is currently linked to activate(id) where id is like link1 for one, link2 for another, depending on their ID.

What i want to happen is if Link1's tab is selected, and they click link2's tab, i want link 1's tab to become unselected and back to nav class and link2's tab selected and on the sel class. i tried below but somethings wrong, can someone find my error and/or make not-****ty code that will work for this? thx.

EDIT: heres the code each link has below, except link1 is replaced with link2 and so-on and so-forth. below it is my updated code. It still doesn't work. see any bugs?

the links code

<td width="25%" class="sel" onclick="activate('link1')" style="cursor:pointer" id="link1"><div align="center" class="style20 style18"><strong>Home</strong></div></td>

the function

<script type="text/javascript">
function activate(link){

    
        if(link=='link1') {
    document.link1.className = 'sel';
    document.link2.className = 'nav';
    document.link3.className = 'nav';
    document.link4.className = 'nav';
    }
    
    
        if(link=='link2') {
        
    document.link1.className = 'nav';
    document.link2.className = 'sel';
    document.link3.className = 'nav';
    document.link4.className = 'nav';
    }
    
    }
</script>

[melles]

You've probably had a solution by now but this works:

The function:

function activate(obj){
    links = document.getElementById('navigator').getElementsByTagName('td');
    for(i=0;i<links.length;i++){
        links[i].className = 'nav';
        if(links[i].id==obj){
            links[i].className='sel';
        }
    }
}

The table:

<table id="navigator">
<tr><td id="link1" class="sel" onclick="activate(this.id)">Link1</td><td id="link2" class="nav" onclick="activate(this.id)">Link2</td><td id="link3" class="nav" onclick="activate(this.id)">Link3</td><td id="link4" class="nav" onclick="activate(this.id)">Link4</td></tr>
</table>

If this doesn't work with your div within the cell then I suspect that the onclick is not bubbling up from the div to the cell.

[~s.o.s~]

> document.link1.className = 'sel'; The way you are using to access the link element is incorrect. The document object doesn't have a property named 'link1', it has a link element having an id of 'link1'. The correct way of doing things would be:

var e = document.getElementById('link1');
e.className = 'sel';

A slightly better(definitely not the best!) way of doing it would be:

<script type="text/javascript">
function activate(link)
{
  var e = document.getElementById(link);
  var e3 = document.getElementById(link3);
  var e4 = document.getElementById(link4);

  if(!e || !e3 || !e4)
    return;
  if(link == 'link1')
  {
    e.className = 'sel';
    e.className = 'nav';
   }
   else if(link == 'link2')
   { 
     e.className = 'sel';
     e.className = 'nav';
   }
   
    e3.className = e4.className = 'nav';
}
</script>

[MattEvans]

A slightly better(definitely not the best!) way of doing it would be:
....

Definately not the best... What's the reason for assigning different classnames twice in sequence on the same object? Where do the variables link3 and link4 come from? Simple mistakes though.. I can see what you meant to put, although that's not all that helpful to a beginner in the language... On the other hand.. finding mistakes can lead to better understanding, I suppose =P.

Assuming that this is going towards each of the links only being 'active' at one time, and continuing for all 4 links:

<script type="text/javascript">
function activate( link )
{
  var e1 = document.getElementById( 'link1' );
  var e2 = document.getElementById( 'link2' );
  var e3 = document.getElementById( 'link3' );
  var e4 = document.getElementById( 'link4' );
  e1.className = e2.className = e3.className = e4.className = "nav";
  var the_selection = document.getElementById( link );
  the_selection.className = "sel";
}
</script>

Code posted by melles does the equiv, although, as a side effect it will switch all 'td's in the document to be of class 'nav', which isn't necessarily desired..

Or.. if wanting to remove obvious multiple redundancies in either melles' code, or the one I just put:

<script type="text/javascript">
var last_link = null;
function activate( link )
{
  if( last_link != null ) last_link.className = "nav";
  var the_selection = document.getElementById( link );
  the_selection.className = "sel";
  last_link = the_selection;
}
</script>

or some other orchestration.. the second relies on a global; which means that the function only works for one group of links per document.. could fix that easily with a hash of the currently selected item against some group-unique key, or some other way; have a group-specific object that stores the state, use a 'stick on property' on a common parent, etc... or just copy the function and rename the global.. up to you really.

sorry Robbins, you'll need "****ty code" as you put it, you can't have persistant, controllable, interaction dependant changes of page state without using some kind of "code".

[~s.o.s~]

> What's the reason for assigning different classnames twice in sequence on the same object?
> Where do the variables link3 and link4 come from?
My program was just a literal translation of what the OP posted with the necessary syntactic changes made. I was expecting a bit more interaction from his side before dissecting the entire thing, but, meh. ;-P