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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide clean up

    I am pretty sure I have to be able to show something and hide something at the same time with one button cleaner than the way I have done it. If one of you experts could look this over and tell me a more efficient way I would greatly appreciate it.

    If this is the best way of doing it, then that works too.

    Code:
     <form name = "myform">
    	<table border="1" width="82">
    		<tr>
    			<td align="center">Card1</td>
    			<td align="center">Card2</td>
    		</tr>
    		<tr>
    			<td align="center"><select size="1" name="vote1" id = "vote1">
    	<option selected value="">-</option>
    	<option value="Vote1-1">1</option>
    	<option value="Vote1-2">2</option>
    	<option value="Vote1-3">3</option>
    	<option value="Vote1-4">4</option>
    	<option value="Vote1-5">5</option>
    	</select></td>
    			<td align="center"><select size="1" name="vote2" id = "vote2">
    	<option selected value="">-</option>
    	<option value="Vote2-1">1</option>
    	<option value="Vote2-2">2</option>
    	<option value="Vote2-3">3</option>
    	<option value="Vote2-4">4</option>
    	<option value="Vote2-5">5</option>
    	</select></td>
    		</tr>
    	</table>
    
    <div class="mid" id="HiddenDiv">
    <p><input type="button" name="donebutton" value="Done!" onclick = "putInText();ShowHide
    
    ('HiddenDiv');ShowHide('HiddenDiv2')";><br>
    </p>
    
    </div>
    
    <div class="mid" id="HiddenDiv2" style="DISPLAY: none" >
    
    	<br><textarea rows="7" name="txtarea1" id = "txtarea1"cols="12" readonly></textarea>
    <br>Copy the contents of the box above and submit the results via E-Mail. 
    <br>
    <input type=button value="Restart" onClick="history.go()">
    </div>
    </form>
    
    <script type = "text/javascript">
    
    function putInText() {
    var a = document.getElementById("vote1").value;
    var txt = document.getElementById("txtarea1").value;
    document.getElementById("txtarea1").value = txt + a + "\n";
    var b = document.getElementById("vote2").value;
    var txt = document.getElementById("txtarea1").value;
    document.getElementById("txtarea1").value = txt + b + "\n";
    }
    
    function ShowHide(HiddenDiv)
    {
    if(document.getElementById(HiddenDiv).style.display == 'none')
    {
    document.getElementById(HiddenDiv).style.display='block';
    }
    else
    {
    document.getElementById(HiddenDiv).style.display = 'none';
    }
    }
    
    
    function ShowHide(HiddenDiv2)
    {
    if(document.getElementById(HiddenDiv2).style.display == 'none')
    {
    document.getElementById(HiddenDiv2).style.display='block';
    }
    else
    {
    document.getElementById(HiddenDiv2).style.display = 'none';
    }
    }
    </script>

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The second declaration of ShowHide does not make any sense. The reason you use functions is so that you can reuse your code, and not copypaste it for every possible parameter.

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by venegal View Post
    The second declaration of ShowHide does not make any sense. The reason you use functions is so that you can reuse your code, and not copypaste it for every possible parameter.
    I am a complete novice and slowly am learning how to do things. The problem I had with using the same one was, it wasn't working on both. It would just hide the first div, and ignore showing the second. I know I am doing it wrong now, but it works this way. How do you get the function working on two different divs?

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    There's really nothing special to do. Just delete that second function declaration.

    What you are doing now is declaring the function ShowHide, and then you declare it once again with exactly the same code, which will overwrite it with the same it was before.

    The only difference is the name of the parameter, but that can be any arbitrary name and won't change how the function works.

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow. I don't know why it didn't seem to work the last time I did that. I read what you said and was thinking "no, that didn't work thats why i copied and renamed". I trusted that you know what your talking about and did it again, and it works fine. I probably fixed whatever other problem I was having when I copied that over and assumed copying fixed it.

    Thanks for proof reading my script for me!

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Please don't consider your code proof read. The function double declaration just caught my eye, but there are lots of other problems in there.

    First of all, validate.

    Then on to your javascript -- it's quite convoluted.

    Consider the following code, which does the same thing:
    Code:
    function putInText() {
    	var a = document.getElementById("vote1").value;
    	var b = document.getElementById("vote2").value;
    	var txtArea = document.getElementById("txtarea1");
    	txtArea.value += a + "\n" + b + "\n";
    }
    
    function ShowHide(HiddenDiv) {
    	var style = document.getElementById(HiddenDiv).style;
    	style.display = style.display == 'none' ? 'block' : 'none';
    }


  •  

    Posting Permissions

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