OnClick change element css class

Okay I've been wracking my brain all morning trying to figure this one out. It seems like to me it -should- work so kudos for anyone who can tell me what I'm doing wrong.

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<style type="text/css">

.subset A{

background-color:#EAEFF5;

color:#000000;

height:12px;

padding:2px;

font-weight:bold;

border:1px solid black;

font-family:Tahoma;

font-size:medium;

margin-left:5px;

font-size:10px;

text-decoration:none;

}

.subset A:HOVER{

  background-color:#FFFFFF;

}

.subsetAlt A{

background-color:#336699;

color:#FFFFFF;

height:12px;

padding:2px;

font-weight:bold;

font-family:Tahoma;

font-size:medium;

border:1px solid black;

margin-left:5px;

font-size:10px;

text-decoration:none;

}

.subsetAlt A:HOVER{

  background-color:#000000;

}

</style>

<script language="javascript" type="text/javascript">

 function setSubSection(myField,newFieldExt,totalField)

{

  var fieldNumber = myField.substr(0,1);

  var sectionField;

  var btnField;

  var fieldTotals = totalField;
 
  for (var x=1;x<=fieldTotals;x++)

  {

    sectionField = x + newFieldExt;

    btnField = document.getElementById(sectionField + "btn");

    if(x==fieldNumber)

    {

    document.getElementById(sectionField).style.display = "block";

    btnField.className = btnField.className + "Alt";

    }

    else

    {

    document.getElementById(sectionField).style.display = "none";

    btnField.className = btnField.className.replace(/Alt/g,'';

    }

  }

}

function changeClass(fieldName,classType)

{

  var myField = document.getElementById(fieldName);

  var myClass = myField.className;

  if (classType == 1)

  {

     myClass = myClass + "Alt";

  }

  else

  {

     myClass = myClass.replace(/Alt/g,'');

  }

  myField.className = myClass;

}

</script>

</head>

<body>

<div id="peopleSet">

  <span id="1_personbtn" class="subset"><a 
 
href="javascript:setSubSection('1_personbtn','_person','2')">Person 1</a></span>

  <span id="2_personbtn" class="subset"><a 
 
href="javascript:setSubSection('2_personbtn','_person','2')">Person 2</a></span>

</div>

<div id="1_person" style="display:none;border:1px solid black;">This is person 1 
 
information</div>

<div id="2_person" style="display:none;border:1px solid black;">Person 2 is full of 
 
information</div>

</body>

</html>

Jul 20 '06 #1

Subscribe Post Reply

100380

Arielle

Nevermind I figured out my error.

I needed to make var myClass = myField.className; into var myClass = myField.className.replace(/Alt/g,""); because what was happening is that once declared an alt it didn't know what to do with it the second time around.

Jul 20 '06 #2

foochal

An alternate way is to use e.setAttribute("className", "you new class name here"). Example:
http://wiki.foochal.org/index.php/Javascript_CSS

Feb 22 '09 #3

Similar topics

Combining two OnClick Events

by: EviL KerneL | last post by:

Hi - I am working on a survey project which has a next button that takes you to the next set of questions and so on. It does this by means of an OnClick event which takes the answers from the...

Javascript

dynamically add a table row with onclick

by: cool2005 | last post by:

I tried to dynamically add/clone a <tr> from an existing <tr> to a <table> but the problem is that I need to have a "onclick" event handler in the <tr>. I have tried following A. approach...

Javascript

A tag: href vs. onClick

by: usenet | last post by:

See <ul> <li><a name="link1" onClick="alert(this.name);return false;" href="#">Link1</a></li> <li><a name="link2" href="javascript:alert(this);">Link2</a></li> <li>Item 3</li> </ul> ...

Javascript

Set TableCell onclick event dynamically

by: Diane Yocom | last post by:

I'm very new to ASP.Net and probably jumped in a little over my head, but... I'm trying to create a user control that will control navigation through my site. It's sortof like Amazon.com, where...

ASP.NET

onclick event not working in Netscape 6

by: moondaddy | last post by:

I have a <a> element in a datagrid which wraps some asp.net labels. this element also has an onclick event which does not fire in netscape 6 (and perhaps other browsers for all I know...). Below...

ASP.NET

Change onclick attribute

by: Giacomo | last post by:

I work on a page structured like: <h2> ... </h2> <div ="div1" class="show"> ... </div> <h2> ... </h2> <div id="div2" class="show"> ... </div> <h2> ... </h2> <div id="div3" class="show">...

Javascript

JavaScript/DOM: Can't set onclick-attribute for <a>'-tags in IE

by: Reinhold Schrecker | last post by:

Hi there, I am trying to generate a dynamic menu with JavaScript/DOM and have problems to set the onclick-attribute for my <a>-elements. The following code works fine in Opera and Mozilla but...

Javascript

Onclick handler picking up second click on tag. Why?

by: garey | last post by:

Hello - I have written a small table of contents manager. If an entry has sub-entries, it has a plus in front of it. If the user clicks on the plus, the sub-entries are displayed. The table of...

Javascript

Moving onclick out of HTML element?

by: nathank | last post by:

This seems trivial, but I have yet to find a way to move "onclick" out of the element itself and up to the <head> or to a .js file. I'd like to clear up that clutter and just have the li element and...

Javascript

How do I add a class to an <a> tag on a onclick() event using Javascipt/DOM?

by: SM | last post by:

Hello, I have an <ul>, and when i click on a item i want to add a class to that item. The class itself will change some display properties, using CSS. See code below. But, whenever i click on a...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA