Can Someone Help Me Debug My Script?

[spock9458]

I have a rather complicated event registration form that uses javascript to show or hide certain tables depending on radio button selections entered by users.  There are basically three types of registrations: Member, Exhibitor and Partial.  The script I'm using works fine to show only certain additional tables for the type of registration selected.  Here is the successful script:

<script>
var radio;
var attendValue = document.getElementsByName("rad_attend").value;

function checkAttend(attendValue) {
  switch(attendValue) {
	case "1":  
    document.getElementById("hideshow1").style.display = 'block';
	document.getElementById("hideshow2").style.display = 'none';
	document.getElementById("hideshow3").style.display = 'none';
	break;
	case "2":
	document.getElementById("hideshow2").style.display = 'block';
	document.getElementById("hideshow1").style.display = 'none';
	document.getElementById("hideshow3").style.display = 'none';
	break;
	case "3":
	document.getElementById("hideshow3").style.display = 'block';
	document.getElementById("hideshow1").style.display = 'none';
	document.getElementById("hideshow2").style.display = 'none';
	break;
	default:
	document.getElementById("hideshow1").style.display = 'none';
 	document.getElementById("hideshow2").style.display = 'none';
	document.getElementById("hideshow3").style.display = 'none';
	
	}
}
</script>

The script is "fired" with these radios:

<td align='right'><input type='radio' name='rad_attend' value='1'
        onchange='UpdateTotal(true); checkAttend(this.value);' /></td>

<td align='right'><input type='radio' name='rad_attend' value='2'
        onchange='UpdateTotal(true); checkAttend(this.value);' /></td>

<td align='right'><input type='radio' name='rad_attend' value='3'
        onchange='UpdateTotal(true); checkAttend(this.value);' /></td>

Like I said this script and functionality are all working properly.  Then they asked me to add the ability for a Member registration to include additional guests, so I created three additional tables for collecting the additional information, and I am trying to use the same type of script as above in order to show either 1, 2, or 3 of the additional tables depending on the radio button selection chosen by the User.  Here is the javascript I am using for this function:

<script>
var radio;
var numAdditional = document.getElementsByName("rad_number_addl_guests").value;

function checkAdditional(numAdditional) {
  switch(numAdditional) {
	case "1":  
    document.getElementById("additionalguest1").style.display = 'block';
	document.getElementById("additionalguest2").style.display = 'none';
	document.getElementById("additionalguest3").style.display = 'none';
	break;
	case "2":
	document.getElementById("additionalguest1").style.display = 'block';
	document.getElementById("additionalguest2").style.display = 'block';
	document.getElementById("additionalguest3").style.display = 'none';
	break;
	case "3":
	document.getElementById("additionalguest1").style.display = 'block';
	document.getElementById("additionalguest2").style.display = 'block';
	document.getElementById("additionalguest2").style.display = 'block';
	break;
	default:
	document.getElementById("additionalguest1").style.display = 'none';
 	document.getElementById("additionalguest2").style.display = 'none';
	document.getElementById("additionalguest3").style.display = 'none';
	
	}
}
</script>

And here are the radio buttons that are supposed to fire that script:

<td colspan='3'>
		<span class='olr-label'>How many additional guests are you brining?: 
  		<input type='radio' name='rad_number_addl_guests' value='1' onchange='checkAdditional(this.value);' /> 1  
  		<input type='radio' name='rad_number_addl_guests' value='2' onchange='checkAdditional(this.value);' /> 2  
  		<input type='radio' name='rad_number_addl_guests' value='3' onchange='checkAdditional(this.value);' /> 3  
		</span>
		</td>

This script is not working at all.  Nothing happens when either of the buttons are selected, and I must be missing something simple because it works in one situation but not in the other.

 

I am hoping another set of eyes with more experience coding can help me figure out what is wrong with my second script.  Any clues would be appreciated.

 

Thanks.

[mac_gyver]

other than a typo you have in the 3rd id under case 3, your code 'works' for me.

 

do you actually have any content with ids - additionalguest1, 2, 3 on your page?

 

is the javascript syntax and html markup on your page error free? errors would stop code execution. errors would show up in the developer console in your browser.

 

next, why are you defining and/or assigning values to the radio, attendValue, and numAdditional variables above each function definition. those lines serve no purpose in the posted code.