Show/Hide a form in JavaScript
Question
I'm trying to hide and show "form1". But even simply hiding doesn't work.
Where is the mistake?
<body>
<script type="text/javascript">
document.getElementById("F1").style.visibility = "hidden";
</script>
<form id="F1" name="form1">
<p class="style14">blah-blah
<input type="text" size="1" name="rd"> blah
</p>
</form>
</body>
4 answers
solution1
3 ACCPTED 2013-08-11 01:12:15
Firstly you need to make sure your script tag is at the bottom of the body or use the DOMContentLoaded event
like so
document.addEventListener('DOMContentLoaded', function(){
var form = document.getElementById('F1');
form.style.visibility="hidden";
// OR
form.style.display = 'none';
});
Your F1 needs to be a string, right now you're referring to a undefined variable.
And I also recommend using display instead of visibility
@update to comment.
The opposites of them are
visibility: visible;
AND
display: block; // Or whatever
solution2
1 2013-08-11 01:01:15
This line is wrong
document.getElementById(thediv).style.visibility="hidden";
What is "thediv" you should use :
document.getElementById("F1").style.visibility="hidden";
solution3
-1 2013-08-11 00:58:18
F1 should be wrapped in quotes. You also might need to encompass your code within the onload function
window.onload = function(){
document.getElementById("F1").style.visibility = "hidden";
}
solution4
-1 2013-08-11 00:58:39
尝试document.getElementById("F1").style.visibility=hidden;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.