Using getElementsName to change tag class

[JBottero]

I have a list like this:

<tr>
    <td>Some Text One</td>
</tr>
<tr>
    <td>Some Text One</td>
</tr>
<tr>
    <td>Some Text One</td>
</tr>

When I click a radio button, I want the text to "dim", that is, change color.

So I have two CSS classes, on and off.

Here's the JS

        function enableCFFID()
        {
            document.cartform.cffid.disabled=false;
            document.getElementsName('cffidtext').class="cffidon";
        }
        function disableCFFID()
        {
            document.cartform.cffid.disabled=true;
            document.getElementsByName('cffidtext').class="cffidoff";
        } 

But, this does not work. What am I doing wrong???

[bluewalrus]

That's a table (table, tr, td) not a list (ol, ul), but going on where is "cffidtext" and where is the function "enableCFFID" being triggered?

[JBottero]

It *is* a list of things contained in a table.

Which is irrelevant to the question of changing the class of a tag with JS.

But you are right that I forgot to include the classes in the example.

<tr>
    <td name ="cffidtext" class="cffidon">Some Text One</td>
</tr>
<tr>
    <td name ="cffidtext" class="cffidon">Some Text One</td>
</tr>
<tr>
    <td name ="cffidtext" class="cffidon">Some Text One</td>
</tr>

I want to toggle the class of the tag (which could be *ANY* tag).

[jscheuer1]

The getElementsByName method returns a node list. Setting its class does nothing. You would have to set each of its member's className (class is a reserved word, className is used to access an individual element's class attribute).

But name isn't a valid attribute for a td element, so at least some browsers wouldn't pick up on it even though you have it hard coded in there.

Name is only valid for form, form element, img, object, area, and a tags, perhaps one or two more.

I'd suggest jQuery where you can get all elements via wide or narrow and varying criteria and execute changes upon them by that or upon a narrowed or completely different criteria. These can even be partially or completely event based if desired.

What's your actual objective? To change the class name of all what? Or is it to change just particular members or a particular member of some collection?

This is the preferred method - Could your objective be gotten simply by adding and removing a class (elements may have more than one class at a time), rather than replacing/toggling the existing class? The properties of each class may need to be rethought. But if this can work the elements can be gotten by their class and the additional class added or removed as a toggle.

If that's too complicated, what do you want to have happen visually on the page and when? How do your classes that you are using reflect that? How often do you need this to happen?