Use simple javascript for multiple element IDs?

[galvin]

I have several sets of radio buttons, all in the same general format as this...

<div id="radio1">
<input type='radio' name='name' id='radioci1' value='yes' onclick="reveal(????)" ><label for='radioci1' class='yes'>Yes</label>
<input type='radio' name='name' id='radioci2' value='no' onclick="hide(????)" ><label for='radioci2' class='no'>No</label>
</div>		
</div>
<div id="dynamic1" ><input type="text" name="textfield" value="" /></div>

 

 

I have this javascript to show/hide the "dynamic" field when either radio button is clicked.  I can make this work by typing the exact ID ("dynamic1"in the parentheses, but I have a BUNCH of sets of radio buttons, so I'd rather not have to write several sets of javascript.  In other words, i will also have a "dynamic2" field.

 

I gotta think there is way to use this simple script below and have it apply to whichever set of radio buttons is being used.  Maybe something using "this"?

 

Wherever I put "????" in the code above and below is where I'm not sure what to put in there, if anything.

 

Can anyone help me out?

 

function reveal(????) {
		document.getElementById(????).style.display="block";
}
function hide(????) {
		document.getElementById(????).style.display="none";
}

 

[nogray]

You can alter the id values for the divs to include the input name as a substring and use the this.id in the input click event.

 

e.g.

<div id="radio1">
<input type='radio' name='name' id='radioci1' value='yes' onclick="reveal(this.name)" ><label for='radioci1' class='yes'>Yes</label>
<input type='radio' name='name' id='radioci2' value='no' onclick="hide(this.name)" ><label for='radioci2' class='no'>No</label>
</div>

<div id="dynamic_name" ><input type="text" name="textfield" value="" /></div>


function reveal(id) {
document.getElementById('dynamic_'+id).style.display="block";
}.....

 

[galvin]

That will do what I need, thank you very much!!!