Simple JS trouble with text manipulation

[elso]

Hello

I don't understand why I am having this trouble. I have tried many variations, but to no avail.
The objective here is to change some displayed text based on radio button selection. My function script currently reads:

<script language="JavaScript" type="text/javascript">
function a10892F() {
	var MugSelect = document.getElementById('MugSelect').value;
	var choice1 = "glass";
	var choice2 = "deco";
			
	if (MugSelect == choice1)
		{
			document.getElementById('a10892').innerHTML = 'Text to display if glass is chosen';
		}
	else if (MugSelect == choice2)
		{
			document.getElementById('a10892').innerHTML = 'text for display if deco was the choice';
		}
	else
		{
			document.getElementById('a10892').innerHTML = 'Default text for any other choice';
		}
	
	}		
</script>

The radio buttons:

<input name="MugSelect" type="radio" value="deco" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="18oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="glass" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="15oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="22oz" id="MugSelect" onclick='a10892F()' />

Changing text section:

<div align="center" id="a10892">This is the text I want to change based on the radio selection</div>

I get no errors, and the script is being read, but it seems the conditions are being ignored. If I select "deco" in the radio buttons, my expectation is the script would halt as soon as the "else if (MugSelect == choice2)" is seen as true. But it doesn't, it executes through to the final "else" regardless, and displays that message.

Can some one please show me what I am doing wrong here?

Many thanks
Elso

[Philip M]

Try this:-

<script type="text/javascript">
function a10892F() {

for (var i =0;i<document.myform.MugSelect.length; i++) {
if (document.myform.MugSelect[i].checked) {
var MugSel = document.myform.MugSelect[i].value
}
}

	var choice1 = "glass";
	var choice2 = "deco";
			
	if (MugSel == choice1)
		{
			document.getElementById('a10892').innerHTML = 'Text to display if glass is chosen';
		}
	else if (MugSel == choice2)
		{
			document.getElementById('a10892').innerHTML = 'text for display if deco was the choice';
		}
	else
		{
			document.getElementById('a10892').innerHTML = 'Default text for any other choice';
		}
	
	}		
</script>

<form name = "myform">
<input name="MugSelect" type="radio" value="deco" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="18oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="glass" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="15oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="22oz" id="MugSelect" onclick='a10892F()' />
</form>

<div align="center" id="a10892">This is the text I want to change based on the radio selection</div>

Comments:-

You can only establish the value of a radio button group by polling.

var MugSelect = document.getElementById('MugSelect').value;
Never use the same name for a Javascript variable as that of an HTML element.

<SCRIPT language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.



"A man would do nothing, if he waited until he could do it so well that no one at all would find fault with what he has done." - Cardinal Newman

[elso]

PERFECT!!

Thank you very much
It has been many years since I last worked with JS.

Thanks again