changing css classes with javascript

**troatie** · 06-16-2004, 03:12 AM

Hello, I'm trying to make a little menu of sorts. Before I get into its functionality, I'd like to have some pretty graphical things working.

Bascially I'm making a list of names. When you click on a name, I want it to be highlighted. When you click on a different name, I want it to be highlighted, and the old name un-highlighted.

I putting the names in <DIV> tags, and using javascript to change the div's class. This is what happens: First click, nothing happens. When you click somewhere else, the original click highlights. A third click will complete the second click's highlight, etc etc. Nothing un-highlights.

Any suggestions would be greatly appreciated. Here's the entire little file i'm using:

HTML Code:

<HTML>

	<HEAD>
		<TITLE>testing</TITLE>
			
		<STYLE TYPE="text/css">
				
			.plain{
				background-color:FFFFFF;
				width:100%;
				color:000000;
				cursor:default;
				text-indent:10px;
				}
				
			.hghlght{
				background-color:444444;
				width:100%;
				color:FFFFFF;
				cursor:default;					text-indent:10px;
				}
							
			BODY{
				margin-left:0px;
				margin-right:0px;
				}
			
		</STYLE>
			
	</HEAD>
		
	<BODY>
		
		<DIV CLASS="hghlght" id="trent_russi" onClick="change('trent_russi')">Trent Russi</DIV>
		<DIV CLASS="plain" id="sara_haislip" onClick="change('sara_haislip')">Sara Haislip</DIV>
		<DIV CLASS="plain" id="arthur_hebert" onClick="change('arthur_hebert')">Arthur Hebert</DIV>
		<DIV CLASS="plain" id="trent_russi2" onClick="change('trent_russi2')">Trent Russi</DIV>
		<DIV CLASS="plain" id="sara_haislip2" onClick="change('sara_haislip2')">Sara Haislip</DIV>
		<DIV CLASS="plain" id="arthur_hebert2" onClick="change('arthur_hebert2')">Arthur Hebert</DIV>
		<DIV CLASS="plain" id="trent_russi3" onClick="change('trent_russi3')">Trent Russi</DIV>
		<DIV CLASS="plain" id="sara_haislip3" onClick="change('sara_haislip3')">Sara Haislip</DIV>
		<DIV CLASS="plain" id="arthur_hebert3" onClick="change('arthur_hebert3')">Arthur Hebert</DIV>
			
		<SCRIPT LANGUAGE="javascript">
		<!--
				
		which='trent_russi';
				
		function change(id)
		{
			identity = document.getElementById(which);
			identity.className="plain";
			identity.document.getElementById(id);
			identity.className="hghlght";
			which=id;
		}
				
		//-->
		</SCRIPT>
		
	</BODY>
		
</HTML>

**troatie** · 01:12 PM

Here, I posted in online so you could see it in "action" as it were:

menutest

Also, I just tried this on Mozilla in linux, and I got the opposite effect. It un-highlighted the first thing, but never highlighted anything else.

Thanks for the help!

**ElectricSheep** · 06-16-2004, 02:25 PM

The statement scope in your function is incorrect.
Replace the current function with the following and modify as required :

function change(id) {
document.getElementById(which).className="plain";
document.getElementById(id).className="hghlght";
which=id;
}

HTH

**troatie** · 06-16-2004, 09:04 PM

I see the error in my code....should have been an "=" instead of a "." in there.

I thought I had tried your suggestion before, ElectricSheep. But this time it worked. Oh well!

Thanks much!