Change <td> class with javascript

**iscot** · 08-01-2008, 08:32 PM

I've been trying to change the class of a <td> (although <tr> or <div> will also work) through a javascript function that runs on pageload. I've been able to call the function under my 'if' conditions, but there are errors in the javascript (my Javascript skills are rather lacking)

one of my iterations is as follows, where 'activities' is my ID name and 'selectedItem' is the class I'm trying to assign:

<script type="text/javascript">
function setActivities() {
document.activities.setAttribute("class", "selectedItem");
document.activities.setAttribute("className", "selectedItem");
return;
}
</script>

...
<tr ><td height="25" >
<div id="activities" ><a href="activities.htm" target="_parent" ><span class="firstLetter">A</span>CTIVITIES</a></div>
</td></tr>
...

There is a conditional statement based on the parent url the does call the function, but I get the error " 'document.activities' is null or not an object " when I test the page. Same error occurs when I try document.getElementById()

any help on changing the class of the <td> (or in the above code, <div>) will be greatly appreciated

Thanks,
Scot

**rangana** · 08-02-2008, 04:19 AM

Use this script:

Code:

function setActivities() { 
document.getElementById('activities').setAttribute('class','selectedItem'); // Failed on IE
document.getElementById('activities').className='selectedItem'; // Cross-browser
}

To access an element id, you have to use DOM:document.getElementById().

**jscheuer1** · 08-02-2008, 03:38 PM

Code:

function setActivities() { 
document.getElementById('activities').className='selectedItem';
}

**rainarts** · 08-02-2008, 04:26 PM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SomeTitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Code:

<script type="text/javascript">
<!--Begin Hiding

function changeActivities( actual_tag, actual_target, your_Activities ) 
{
  var target_tag = document.getElementsByTagName( actual_tag );

for ( var initiate = 0; initiate < target_tag.length; initiate++ ) 

{ 
   if ( target_tag.item( initiate ).className == actual_target ) 

{  target_tag.item( initiate ).style.color = '#C0C0C0';
   target_tag.item( initiate ).item( initiate ).style.backgroundColor = '#444444';
  target_tag.item( initiate ).style.fontWeigth = 'bold';
  target_tag.item( initiate ).style.fontSize = '24px'; 
  target_tag.item( initiate ).innerHTML = your_Activities;
      }
   }
}
// Done Hiding -->
</script>

Code:

</head>
<body>
<table>
<tr ><td height="25" >
<div id="activities" class="mydiv" onclick="changeActivities('div', 'mydiv');" ><a class="myanchor" href="activities.htm" target="_parent" onclick="changeActivities('a', 'myanchor');"><span class="firstLetter" onclick="changeActivities('span', 'firstLetter', 'A');">A</span>CTIVITIES! Now see the firstLetter</a></div>
</td></tr></table>
</body></html>

With this method you can manipulate tags and particular classes on your page... Hope it helps' you. Enjoy...

**jscheuer1** · 08-02-2008, 04:55 PM

@rainarts,

(puts on his moderator hat)

When posting I notice you often use nearly impossible to read light colors for your text. Please refrain from doing so in the future.

(takes off his moderator hat)

Also, this:

Code:

.item( initiate )

may more simply be done as:

Code:

[initiate]

And an element may have more than one class name. See the specification for getting elements by class name (getElementsByClassName):

http://www.whatwg.org/specs/web-apps...ntsbyclassname

Which has already been implemented in at least several browsers. A spoof of it (as you have more or less put forth) should follow the specification as closely as possible and be skipped altogether (for reasons of efficiency) in those browsers supporting the native method.

This is a recent development, a good one that should be taken advantage of.

**mburt** · 08-03-2008, 03:44 AM

Holy **** people... Don't make this complicated.

I've been trying to change the class of a <td> (although <tr> or <div> will also work) through a javascript function that runs on pageload

In the body, after the table:

Code:

<script type="text/javascript">
document.getElementById("activities")["className"] = "selectedItem";
</script>

We know that setAttribute() is not cross-browser because of IE, so there's no need of using it when other browsers can simply use the className attribute.

**jscheuer1** · 08-03-2008, 05:01 AM

Please read the thread before posting.

Originally Posted by mburt

Holy **** people... Don't make this complicated.

In the body, after the table:

Code:

<script type="text/javascript">
document.getElementById("activities")["className"] = "selectedItem";
</script>

Um, That's still more complicated (slightly) than what I already posted:

Originally Posted by jscheuer1

Code:

function setActivities() { 
document.getElementById('activities').className='selectedItem';
}

**iscot** · 08-06-2008, 07:10 PM

I am still getting " 'document.getElementById('...')'is null or not an object "
If I assign the to a variable (elem) as your link suggests I get the error that elem is null or not an object

**jscheuer1** · 08-06-2008, 08:01 PM

Well, you cannot run:

Code:

function setActivities() { 
document.getElementById('activities').className='selectedItem';
}

until after the element with the id of 'activities' has been parsed by the browser. The element with the id of 'activities' must exist, and be the only one on the page with that id.

Other than that, there could be all sorts of minor typos or other things that could cause a problem, hard to guess. But if you were to put up a demo of the problem on the web, it should be a piece of cake to figure out the problem(s).

Please post a link to the page on your site that contains the problematic code so we can check it out.

**iscot** · 08-07-2008, 09:31 PM

Thanks John,
I should have know to call it after which got rid of the null error, but I'm still not getting the intended result. I put it up on a temporary url

http://iscotdesigns.com/activities.htm

Note that the links and pictures do not work as I did not load the unused portions. The files of activities.htm, LeftMenu.html, and default.css are loaded as they are on the final product. The code is in LeftMenu.html which is an iframe within activities.htm

I have alerts in to show that the javascript has assertained parent.location.href=="http://iscotdesigns.com/activities.htm" and that setActivities() function has been called. "activities" and "selectedItem" are both defined classes in default.css