...

View Full Version : Using getElementsName to change tag class



Arty Ziff
11-13-2010, 05:05 PM
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???

DrDOS
11-13-2010, 05:55 PM
There's no way that anyone can make it work without the rest of the code. getElementsName is not a predefined function in javascript, so there must be more code that goes with it. If you post a link to your test page that would be the best choice.

Arty Ziff
11-13-2010, 06:04 PM
Opps, the code snip was incomplete:

<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>

All I want to do is switch the class when a radio button is clicked.

The important part is the JS function, not what control (radio button or check box or link).

DrDOS
11-13-2010, 06:12 PM
What's wrong with posting the entire page code? Then we can copy and paste it to a blank document and work with it. As it is part of the code is still missing. Please put all the code on one page and put that up.

Arty Ziff
11-13-2010, 06:16 PM
What's wrong with posting the entire page code? Then we can copy and paste it to a blank document and work with it. As it is part of the code is still missing. Please put all the code on one page and put that up.

Because it's irrelevant to the question, there's no reason why you would need to see the code for the whole page, most of which has *nothing* to do with how to write a simple function that acts on a single specific set of tags.

But since you must...

<html>
<head>
<style media="screen" type="text/css">
.cffidoff {
font-size: 1.2em;
color: gray;
}
.cffidon {
font-size: 1.2em;
color: black;
}
</style>
<script type="text/javascript">
function enableCFFID()
{
document.cartform.cffid.disabled=false;
document.getElementsByName('cffidtext').setAttribute("class", "cffidon");
}
function disableCFFID()
{
document.cartform.cffid.disabled=true;
document.getElementsByName('cffidtext').setAttribute("class", "cffidoff");
}
</script>
</head>
<body>
<input type="radio" name="extendCFF" value="no" checked onClick="disableCFFID();">
<br />
<input type="radio" name="extendCFF" value="no" checked onClick="ensableCFFID();">
<table>
<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>
</table>
</body>
</html>



But thanks for you time. Maybe someone else has some suggestions.

DrDOS
11-13-2010, 06:58 PM
This will get you started
function enableCFFID()

{

//document.cartform.cffid.disabled=false;

var myobj = document.getElementsByName('cffidtext');

myobj[0].className="cffidon";

}

function disableCFFID()

{

//document.cartform.cffid.disabled=true;

var myobj = document.getElementsByName('cffidtext');

myobj[0].className="cffidoff";

}Get elements by name will return a collection, you will have to loop over the collection to change all of them. You also have some syntax errors ( spelling ) in the html.

Arty Ziff
11-15-2010, 05:44 AM
OK, thanks! Here's the final function, which works very well. You have been a great help.

<script type="text/javascript">
function enableCFFID() {
document.cartform.cffid.disabled=false;
var myobj = document.getElementsByName('cffidtext');
// Count array elements and loop through them.
for ( var i=myobj.length-1; i>=0; --i ){
myobj[i].className="cffidon";
}
}

function disableCFFID() {
document.cartform.cffid.disabled=true;
var myobj = document.getElementsByName('cffidtext');
// Count array elements and loop through them.
for ( var i=myobj.length-1; i>=0; --i ){
myobj[i].className="cffidoff";
}
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum