Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple JS trouble with text manipulation

    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:
    Code:
    <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:
    Code:
    <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:
    Code:
    <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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Try this:-

    Code:
    <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

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    PERFECT!!

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

    Thanks again


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •