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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript switch content question

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
    <head>
    <title></title>
    <script language="javascript">
    function selected_value(obj) {
        return obj.options[obj.selectedIndex].value
    }
    function show_node(dom_id) {
        document.getElementById(dom_id).style.display = "block";
    }
    function isolate(my_id) {
    	for(i = 1; i <= 2; i++) {
    		if("option" + i == my_id) {
    			show_node("option" + i);
    		}
            else {
    	        element = document.getElementById("option" + i);
    			element.style.display = "none";
    	        //element.parentNode.removeChild(element);
            }
        }
    }
    </script>
    </head>
    <body>
        <select name="dropdown" onchange="isolate(selected_value(this));">
            <option>SELECT</option>
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
        <div id="option1" style="display: none;">
            Div 1 Text
        </div>
        <div id="option2" style="display: none;">
            Div 2 Text
        </div>
    </body>
    </html>
    Could someone show me how to do the exact same thing, except with (two) radio buttons?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
    <head>
    <title></title>
    <script language="javascript">
    function show_node(dom_id) {
        document.getElementById(dom_id).style.display = "block";
    }
    function isolate(my_id) {
    	for(i = 1; i <= 2; i++) {
    		if("option" + i == my_id) {
    			show_node("option" + i);
    		}
            else {
    	        element = document.getElementById("option" + i);
    			element.style.display = "none";
    	        //element.parentNode.removeChild(element);
            }
        }
    }
    </script>
    </head>
    <body>
        <input type="radio" name="dropdown" onchange="isolate(this.value);" value="option1" /> <span>Option 1</span> <br />
        <input type="radio" name="dropdown" onchange="isolate(this.value);" value="option2" /> <span>Option 2</span> <br />
        <div id="option1" style="display: none;">
            Div 1 Text
        </div>
        <div id="option2" style="display: none;">
            Div 2 Text
        </div>
    </body>
    </html>


  •  

    Posting Permissions

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