Color-Fading function that works on "Careful" clicks

[iaswnidou]

Hello

I have an asp.net page and a radiobuttonlist in it. In html the listcontrol is included in a <tr> tag and i have added a javascript function to be called on the onClick event of the listcontrol.
Once i click i iterate through the radiobuttons and if the clicked item has a specific value, the color of the <tr> changes.

Here is my html:

<tr id="Age" bgColor="#9dbcd8">
  <td><asp:radiobuttonlist id="rdbAgeList" onClick="BgFade(0x9d, 0xbc, 0xd8, 0x99, 0x99, 0x99, 10,'Age','rdbAgeList',8)" runat="server" RepeatDirection="Horizontal" RepeatColumns="5">
								<asp:ListItem Value="1">Pre - 1900s</asp:ListItem>
	<asp:ListItem Value="2">1900 - 1930</asp:ListItem>
	<asp:ListItem Value="3">N/s</asp:ListItem>
</asp:radiobuttonlist></td>
.
.
.

The Javascripts functions:

var rowObject; 
function BgFade(red1, grn1, blu1, red2,grn2, blu2, steps,rowID,radiobuttonlistID,value) 
	{
	sred = red1; sgrn = grn1; sblu = blu1; ered = red2; egrn = grn2; eblu = blu2; 
	inc = steps; step = 0; 
	rowObject = document.getElementById(rowID);
	var radiobuttonlist = document.forms[0].elements[radiobuttonlistID];
			for ( var i=0; i<radiobuttonlist.length;i++)
			{
				if (radiobuttonlist[i].checked==true)
				{
					if (radiobuttonlist[i].value != value)
					{
						RunFader(rowObject); 
					}
					else {rowObject.bgColor = "#" + red1.toString(16) + grn1.toString(16) + blu1.toString(16);}
				}
			}
	}			
			
function RunFader(obj)
	{
	var epct = step/inc; var spct = 1 - epct; 
	obj.bgColor = Math.floor(sred * spct + ered *epct)*256*256 + Math.floor(sgrn * spct + egrn * epct)*256 
	+Math.floor(sblu * spct + eblu * epct); 
	if ( step < inc ) 
	{setTimeout('RunFader(rowObject)',50);}
	step++;	}

which i found here:

http://www.javascriptkit.com/script/cut4.shtml

and the source of the page when i run the project:

<tr id="Age" bgColor="#9dbcd8">
  
  <td><table id="rdbAgeList" onClick="BgFade(0x9d, 0xbc, 0xd8, 0x99, 0x99, 0x99, 10,'Age','rdbAgeList',8)" border="0">
	<tr><td><input id="rdbAgeList_0" type="radio" name="rdbAgeList" value="1" /><label for="rdbAgeList_0">Pre - 1900s</label></td>
            <td><input id="rdbAgeList_1" type="radio" name="rdbAgeList" value="2" /><label for="rdbAgeList_1">1900 - 1930</label></td>
            <td><input id="rdbAgeList_2" type="radio" name="rdbAgeList" value="3" /><label for="rdbAgeList_2">N/s</label></td></tr>

</table></td>

Whenever I click inside the circle of the radiobutton, the correct radiobutton is detected and the function runs fine. However, when i click on the label of a radiobutton ("label for"), the function does not pick the correct radiobutton and the result is not the desirable one.
Of course the users won't pay attention where they click, hence the problem.

 

[BabyJeffy]

You are passing 'rdbAgeList' in as the parameter for radiobuttonlistID. This is not a valid id for the radio buttons.

You should move this onclick (note that it's all lower case) to each of the radio buttons... and pass in the id of the radio button as the 9th parameter.

Hopefully that'll work out!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[iaswnidou]

I tried putting the "onClick= function()" inside the <asp:ListItem> tag, but the script doesn't get called this way.

I guess i will have to drop the radiobuttonlist and have it replaced by individual radiobuttons. But that sounds like an awful lot of work, so i'll probably tell my client he can't have it.

 

[BabyJeffy]

It's frustrating when the IDE you use restricts your ability to create a working solution to a rather simple problem - and doubly so when you feel you have to tell the client they can't have the solution just because you are unable to figure out how to use the tools you have chosen.

This is a great example of where an understanding of (and willingness to use) hand-coded markup would help you deliver the solution.

What a shame.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094