Welcome to WebmasterWorld Guest from 107.22.61.174

Forum Moderators: open

Message Too Old, No Replies

referencing an array variable in a function

syntax: radiobutton[2]

     
10:07 pm on Dec 20, 2005 (gmt 0)

New User

10+ Year Member

joined:June 11, 2005
posts:18
votes: 0


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

10:40 pm on Dec 20, 2005 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5003
votes: 20


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

1:49 am on Dec 21, 2005 (gmt 0)

New User

10+ Year Member

joined:June 11, 2005
posts:18
votes: 0


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

6:30 pm on Dec 21, 2005 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5003
votes: 20



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.