Javascript function to switch Classes???

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.

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

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".

> 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