Despite reviewing multiple examples, I am still struggling to make this DIV visible and hidden by clicking a checkbox. Can someone please review my JavaScript code?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleSample - Hidden Div</title>
</head>
<script type="text/Javascript">
function showhideDiv1() {
if (document.getElementyById('div1').style.display = "none") {
//show the div:
document.getElementById('div1').style.display = "block";
}
else {
//hide the div:
document.getElementById('div1').style.display = "none";
//clear the form:
//document.getElementById('myform').reset();
}
}
function showhideDiv2() {
if (document.getElementyById('div2').style.display = "none") {
//show the div:
document.getElementById('div2').style.display = "block";
}
else {
//hide the div:
document.getElementById('div2').style.display = "none";
//clear the form:
//document.getElementById('myform').reset();
}
}
</script>
<body>
<form id="myform" name="myform" method="post" action="">
<div id="div1">
<p>Content for id "div1" Goes Here</p>
<table width="800" border="0">
<tr>
<td>First Name</td>
<td><input name="fname" type="text" id="fname" value="" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input name="lname" type="text" id="lname" value="" /></td>
</tr>
</table>
</div>
<div id="div2">
<p>Content for id "div2" Goes Here</p>
<table width="800" border="0">
<tr>
<td width="258">Email</td>
<td width="532"><input name="emailAddr" type="text" id="emailAddr" value="" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="div3">
<p>Content for id "floatingDiv" (when ready) Goes Here</p>
<table width="800" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input onchange="showhideDiv1();" name="showDiv1Chk" type="checkbox" id="showDiv1Chk" checked="checked" />
- Show Div1</td>
<td> </td>
</tr>
<tr>
<td><input onchange="showhideDiv2();" name="showDiv2Chk" type="checkbox" id="showDiv2Chk" checked="checked" />
- Show Div2</td>
<td> </td>
</tr>
</table>
</div>
<p> </p>
</form>
</body>
</html>
Your assistance is greatly appreciated!