...

View Full Version : Simple JS trouble with text manipulation



elso
06-27-2009, 04:58 PM
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
06-27-2009, 06:30 PM
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
06-27-2009, 08:00 PM
PERFECT!!

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

Thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum