View Full Version : Firefox: className Problem

10-15-2008, 12:25 AM
Here's my basic JS function:

function searchtoggle(id) {
var e = document.getElementById(id);
people.className = 'notactive2';
places.className = 'notactive2';
things.className = 'notactive2';
everything.className = 'notactive2';
e.className = 'active2';

And here's my HTML:
Search for:
<a onfocus="if(this.blur)this.blur()" href="#" id="everything" onclick="searcheverything('everything')" class="activelong2"><span>Everything</span></a>
<a onfocus="if(this.blur)this.blur()" href="#" id="people" onclick="searchtoggle('people')" class="notactive2"><span>People</span></a>
<a onfocus="if(this.blur)this.blur()" href="#" id="places" onclick="searchtoggle('places')" class="notactive2"><span>Places</span></a>
<a onfocus="if(this.blur)this.blur()" href="#" id="things" onclick="searchtoggle('things')" class="notactive2"><span>Things</span></a>

This script basically changes the class of the <a> tags in each part when triggered. It works brilliantly in IE (both 7 and 8), Google Chrome, and Safari. But not in Firefox. I've read up on some common problems with the className thingy in Firefox, but never got a good working answer to my problem.

Why doesn't this work??

PLEASE Help! Thank you so much for any advice you can give me.

10-15-2008, 05:41 AM
What's the value of people, places, things and everything variable?

What's not working? Works fine on my end on FF.

10-15-2008, 07:01 AM
Those aren't variables are they??? they're identifying the "id" tags of my <A> tags that I wanna change.

The idea of the class change is that it changes the class (the basic style) of each a tag as I click them or whatever... that doesn't happen in FF. Works in all other browsers.

10-15-2008, 02:18 PM
Personally I never use something like:
people.className = 'notactive2';
(I remember seeing something like that and It was working but I don't like it)

I use instead:
var objPeople = document.getElementById('people');
if (objPeople)
objPeople.className = 'notactive2';

Always work :) and you aren't cofused with "people" since you declare a var for it...

Bill Posters
10-15-2008, 03:04 PM
Those aren't variables are they??? they're identifying the "id" tags of my <A> tags that I wanna change.
They're only working in IE (and Opera) due to IE's proprietary 'document.all' DOM, which allows you to address an element directly by its id value.

The official standards-based method is to use document.getElementById('');

Personally, I wouldn't bother checking for the existence of the element first, if you're working in a controlled code environment, where you know the elements will be present.

To make the script more scalable, you could consider referencing the anchor elements as children of a parent/ancestor element. This would enable you to loop through them all, deactivating them (rather than individually deactivating one via a dedicated line in the script) - and then re/activate the clicked anchor.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function searchtoggle(id) {

var e = document.getElementById(id);
var aEls = document.getElementById('whatever').getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.className = '';

e.className = 'active';


<style type="text/css">

#whatever a {
color: red;

#whatever a.active {
color: green;


<ul id="whatever">
<li><a href="#" id="everything" onclick="searcheverything(this.id);return false;" class="active"><span>Everything</span></a></li>
<li><a href="#" id="people" onclick="searchtoggle(this.id);return false;"><span>People</span></a></li>
<li><a href="#" id="places" onclick="searchtoggle(this.id);return false;"><span>Places</span></a></li>
<li><a href="#" id="things" onclick="searchtoggle(this.id);return false;"><span>Things</span></a></li>


10-16-2008, 12:04 AM
Brilliant. Thanks all around!