Forum Moderators: open
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!
The only real 'error' in the script is that you forgot to untoggle the elements. With this one, I've just set their BGcolor to "" (nothing).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="any.js" type="text/javascript">
function toggle()
{
var form = document.forms[0];
var rads = form.elements.change;
for (var i=0; i < rads.length; i++)
{
var color = rads[i].checked? "red" : "";
document.getElementById("voila"+i).style.backgroundColor = color;
}
}
</script></head>
<body>
<form name="form1" method="post" action="">
<input type="radio" name="change" value="voila0" onClick="toggle()" />11111111<br>
<input type="radio" name="change" value="voila1" onClick="toggle()" />22222222<br>
<input type="radio" name="change" value="voila2" onClick="toggle()" />33333333<br>
</form><table>
<tr>
<td id="voila0">11111111</td>
<td id="voila1">22222222</td>
<td id="voila2">33333333</td>
</tr>
</table></body>
</html>
document.all.elementId
Don't use this.
Use document.getElementById('_elementId_')
[webmasterworld.com...] [post #11]
Toggling
Important concept that. I reckon it can be split into two approaches:
(Let's say we're toggling a group of elements between 'off' & 'on')
#1 Splurge
Run through all the elements in the group, switching them all off. Then switch the currently chosen one on.
#2 Swap
Have a global variable, or better an object property, that holds a reference to the element that is currently on. To toggle, you turn off the currently held element, swap the old element for the new, then turn on the new one.
Swap is the better of the two, and the more elements in your group, the more important it is to use method #2. I saw a script once where someone was using the Splurge method to toggle between cells on a 50x50 grid table. Get the idea?
But Mr. Marx was using the Splurge technique on that other thread.
That is true (guilty). Under the circumstances, it was just easier (because there was no other way of referencing the images other than their source order). If it's just a few elements then nobody's going to notice the inefficiency, and they won't here either. Still, here's the Swap implementation.
It requires that we send a reference to the button being clicked, so we can use the value that you have put in each one:
<input type="radio" name="change" value="voila0" onclick="toggle(this)" />
var currCell = nullfunction toggle(button)
{
if(currCell)
currCell.style.backgroundColor = "";
currCell = document.getElementById(button.value);
currCell.style.backgroundColor = "red";
}
thanks for explaining that for me... I have found a way to do this but I really want to understand the concept so that I am not just blindly cuting and pasting code.
your explaination makes sense.
cheers for your help.
s.
