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

100377

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

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

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

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

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