PDA

Click to See Complete Forum and Search --> : radio button - toggle bg td colors.

gleddy
08-23-2004, 09:50 AM
heya,

this one has been killing me for a bit and I think it is time to stop and come back to it later...

here is the problem, I am trying to use 3 radio buttons (1,2 and 3) to change the bg colors of corresponding td cells (1,2, and 3). The color change is: red when button is checked, white when button is not.

but, I only want the td cell to be highlighted red when the button is checked. otherwise it should shut off. (or back to white.)

here is the code if anyone wants to have a look. I have it working so it turns the cells on, but they will not return back to white afterwards. Thanks for any help in advance...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function toggle() {
var form = document.forms[0];
for (var i=0; i < form.change.length; i++) {
if (form.change[0].checked) {
document.all.voila1.style.backgroundColor='red';
}
if (form.change[1].checked) {
document.all.voila2.style.backgroundColor='red';
}
if (form.change[2].checked) {
document.all.voila3.style.backgroundColor='red';
}
}
}
</script>
</head>

<body>

<form name="form1" method="post" action="">
<input type="radio" name="change" value="voila1" onClick="toggle()" />11111111</label>
<input type="radio" name="change" value="voila2" onClick="toggle()" />22222222</label>
<input type="radio" name="change" value="voila3" onClick="toggle()" />33333333</label>
</form>

<table>
<tr>
<td name="voila1" id="voila1">11111111</td>
<td name="voila2" id="voila2">22222222</td>
<td name="voila3" id="voila3">33333333</td>
</tr>
</table>

</body>
</html>


thanks!
WestPac
08-23-2004, 10:20 AM
Try this:

<HTML>
<head>
<Script Language=JavaScript>

var prevActive = 0;

function toggle(Active){

if (prevActive != 0){document.getElementById(prevActive).bgColor= "white"}
document.getElementById(Active).bgColor= "red";
prevActive = Active;

}

</script>
</head>
<body>
<form name="form1">
<input type="radio" name="change" value="voila1" onClick="toggle(1)" />11111111</label>
<input type="radio" name="change" value="voila2" onClick="toggle(2)" />22222222</label>
<input type="radio" name="change" value="voila3" onClick="toggle(3)" />33333333</label>
</form>
<table>
<tr>
<td id=1>11111111</td>
<td id=2>22222222</td>
<td id=3>33333333</td>
</tr>
</table>
</body>
</html>
gleddy
08-23-2004, 10:28 AM
man, that was fast...

I don't totally get how that is working, but I have noticed it works in Firefox now as well.

is this because you changed to document.getElementById ??

cheers for the help.
now I can get some sleep.
WestPac
08-23-2004, 10:46 AM
I honestly don't know. I know nothing about Firefox, however I am glad that it is working for you. Good luck with your project. All it does, is keep track of which cell is "active", i.e. 1, 2, or 3. Each onClick passes its respective number to the function. At the end of the function, the one that is now active is assigned to the variable prevActive, so that when the function is next called, the previously active cell is "cleared", and then the new active cell is changed to red bg.