...

View Full Version : Show/Hide clean up



rabit
06-03-2009, 08:42 PM
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.


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

venegal
06-03-2009, 08:49 PM
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.

rabit
06-03-2009, 08:53 PM
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?

venegal
06-03-2009, 09:22 PM
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.

rabit
06-03-2009, 09:59 PM
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!

venegal
06-03-2009, 10:16 PM
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 (http://validator.w3.org/).

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

Consider the following code, which does the same thing:

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';
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum