I play around with js a little... I just don't get this.
The file below is just trying out some things... it does exactly what
I want (hides/displays some things, no big deal)
The problem is that in the swapcheck(x) function below, if I uncomment
the first line (commented with //) the whole thing brings and IE
errors the page with an object expected error on line (whichever input
control I clicked).
swapcheck isn't even getting called. I don't get why it is breaking
the page.
Any help greatly appreciated.
(note that if you try this file, you will need to create two css files
to link to)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
<!--
function changeIt()
{
if (document.all.theLine.style.display=='none') {
document.all.theLine.style.display=''
}
else {
document.all.theLine.style.display='none'
}
}
-->
</script>
<script language="javascript">
<!--
function swapcheck(x) {
// if document.form1.calcat1.checked { } ' this line here!
}
function swapdisplay(x) {
x--
var theSheet=document.styleSheets[1]
var theRule=theSheet.cssRules? theSheet.cssRules[x]:
theSheet.rules[x]
if (theRule.style.display=="block") {
theRule.style.display="none" }
else {
theRule.style.display="block" }
}
-->
</script>
<link href="newfbc.css" rel="stylesheet" type="text/css" />
<link href="calcats.css" rel="stylesheet" type="text/css" />
</head>
<body>
The next line should disappear and then reappear.
<div id="theLine" class="dynamic">This is the one</div>
<div id="notTheLine" class="static">This one should stay</div>
<p>
<form name="form1" method="post" action="">
<input type="button" onclick="changeIt()" value="Change!" />
<p>
<p class="calcat1">Category 1 </p>
<p class="calcat2">Category 2 </p>
<p class="calcat3">Category 3 </p>
<p class="calcat4">Category 4 </p>
<p class="calcat5">Category 5 </p>
<p class="calcat6">Category 6 </p>
<p class="calcat7">Category 7 </p>
<p class="calcat8">Category 8 </p>
<p class="calcat9">Category 9 </p>
<p></p>
<p><br />
<input type="button" value="1" onclick="swapdisplay(1)" />
<input type="button" value="2" onclick="swapdisplay(2)" />
<input type="button" value="3" onclick="swapdisplay(3)" />
<input type="button" value="4" onclick="swapdisplay(4)" />
<input type="button" value="5" onclick="swapdisplay(5)" />
<input type="button" value="6" onclick="swapdisplay(6)" />
<input type="button" value="7" onclick="swapdisplay(7)" />
<input type="button" value="8" onclick="swapdisplay(8)" />
<input type="button" value="9" onclick="swapdisplay(9)" />
<table>
<tr>
<td>Category 1
<input type="checkbox" name="calcat"
onclick="swapdisplay(1)" />
</td>
<td>Category 2
<input type="checkbox" name="calcat"
onclick="swapdisplay(2)" />
</td>
<td>Category 3
<input type="checkbox" name="calcat"
onclick="swapdisplay(3)" />
</td>
<td>Category 4
<input type="checkbox" name="calcat"
onclick="swapdisplay(4)" />
</td>
<td>Category 5
<input type="checkbox" name="calcat"
onclick="swapdisplay(5)" />
</td>
<td>Category 6
<input type="checkbox" name="calcat"
onclick="swapdisplay(6)" />
</td>
<td>Category 7
<input type="checkbox" name="calcat"
onclick="swapdisplay(7)" />
</td>
<td>Category 8
<input type="checkbox" name="calcat"
onclick="swapdisplay(8)" />
</td>
<td>Category 9
<input type="checkbox" name="calcat"
onclick="swapdisplay(9)" />
</td>
</tr>
</table>
</form>
</body>
</html>
