loop and +1 ?

Discussion in 'JavaScript' started by Sushi_Master, Apr 2, 2009.

  1. #1
    I've got some basic script which shows and hides a textarea based on the value of two radio buttons, which works fine.

    
    <script type="text/javascript">
    function checkIt(el) {
    if (el.value == "yes") {
    document.getElementById('textbox').style.display = "block";
    }
    else {
    document.getElementById('textbox').style.display = "none";
    document.getElementById('textboxvalue').value = '';
    }
    }
    </script>
    
    Code (markup):
    and here are my radio buttons and text area

    
    <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this);">Hide
    <input type="radio" name="radio" value="yes" onclick="checkIt(this);">Show
    
    <div id="textbox" style="display:none;">Textarea: <input type="text" id="textboxvalue"/></div>
    
    Code (markup):
    Now I want to add more radio buttons to the form which pop up another textarea.

    My Jscript is quite basic... how can I loop the script and add 1 to the ID to make this work?

    I'd rather do this than duplicate the same script over and over.

    Thanks.
     
    Sushi_Master, Apr 2, 2009 IP
  2. ADD3AN

    ADD3AN Guest

    Best Answers:
    0
    #2
    This should do the trick:

    
    <script type="text/javascript">
    function checkIt(el,boxid) {
    	if (el.value == "yes") {
    		document.getElementById(boxid).style.display = "block";
    	}
    	else {
    		document.getElementById(boxid).style.display = "none";
    		document.getElementById(boxid + 'value').value = '';
    	}
    }
    </script>
    
    Code (markup):

    
    <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this,'textbox1');">Hide
    <input type="radio" name="radio" value="yes" onclick="checkIt(this,'textbox1');">Show
    
    <div id="textbox1" style="display:none;">Textarea: <input type="text" id="textbox1value"/></div>
    
    <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this,'textbox2');">Hide
    <input type="radio" name="radio" value="yes" onclick="checkIt(this,'textbox2');">Show
    
    <div id="textbox2" style="display:none;">Textarea: <input type="text" id="textbox2value"/></div>
    
    <input type="radio" name="radio" value="no" checked="checked" onclick="checkIt(this,'textbox3');">Hide
    <input type="radio" name="radio" value="yes" onclick="checkIt(this,'textbox3');">Show
    
    <div id="textbox3" style="display:none;">Textarea: <input type="text" id="textbox3value"/></div>
    
    Code (markup):
     
    ADD3AN, Apr 4, 2009 IP