referencing an array variable in a function

syntax: radiobutton[2]

[dtleahy]

Hello,

I'm trying to make a single function to modify the background in several form elements (Select Lists, Textboxes, etc.) I'm passing in the names of two form elements (the radio button group name, and the select list to modify the background, as well as the radio button number that should affect the change.)

This is the line where the error is: if (RB[2].checked)

Here's my attempt at the function:

<script type="text/javascript" language="javascript"><!--
function ChangeBackgroundColor(objRB,intRB,objSEL){

var RB = document.getElementById(objRB);
var SEL = document.getElementById(objSEL);

if (RB[2].checked)
{
SEL.style.backgroundColor='#FFFFFF';
}
else
{
SEL.style.backgroundColor='#CCCCCC';
}
}
//-->
</script>

... and, I'm trying to call it in the onClick event of the click of any button in the radio group, so I added this to each button:

onClick="ChangeBackgroundColor('rb_MyButtonGroup',1,'lstMyAssociatedList')"

Any help will be appreciated!

Dennis

[Fotiman]

An id value must be unique on a page. Thus, you can not use getElementById to get the radio button group (as that would imply that each radio button had the same id value).

Instead, maybe your function could take a form name along with the group name (not id).

[dtleahy]

Thanks, Fotiman.

Now that you mention it, that makes perfect sense. As I call the function, I do know which radio button (by unique ID) that I want to reference. But, I still need to traverse the collection to set the background color of the SelectList to gray unless the user clicks the one radio button that changes the SelectList background to white. (It's just a visual clue to the user which Select Lists that they need to make selections in.)

(I'm a JavaScript relative newbie.) I first tried to just pass in the radiobutton group name , as well as the index of the particular button, but did not know the syntax to reference the name of the object once I was within the function body. I think I need a good tutorial on JavaScript functions with parameters, where at least one of the parameters is a form element or document element (object.)

If someone can point me to a good tutorial, or even help me with this function, that would be appreciated.

Dennis

[Fotiman]

Now that you mention it, that makes perfect sense. As I call the function, I do know which radio button (by unique ID) that I want to reference. But, I still need to traverse the collection to set the background color of the SelectList to gray unless the user clicks the one radio button that changes the SelectList background to white. (It's just a visual clue to the user which Select Lists that they need to make selections in.)

So, I'm assuming each radio button selection in this group is tied to a particular select list, right? Why not just pass the ID value of the select list?

For example

onClick="ChangeBackgroundColor(this.form,'lstMyAssociatedList')"

Then in your function:

function ChangeBackgroundColoe( formObj, selectId ) 
{ 
 if(!document.getElementById ) return; 
 var selectObj = document.getElementById(selectId) 
 if(!selectObj ) return; // ID not found 
 // Iterate the formObj, resetting the background 
 // color of all "select" elements to white 
 var selectList = formObj.getElementsByTagName("SELECT"); 
 for( var i = 0; i < selectList.length; i++ ) 
 { 
  selectList.item(i).style.backgroundColor='#FFFFFF'; 
 } 
 // Set the background color of selectId 
 selectObj.style.backgroundColor='#CCCCCC'; 
} 

Note, I have not tested that code, but I think it'll work.

I think I need a good tutorial on JavaScript functions with parameters, where at least one of the parameters is a form element or document element (object.)

Try the website Devguru.com. They have a pretty good reference for JavaScript [devguru.com].

Hope this helps.