My web page is at http://www.analog24.net/~cscott/Lab3-Trig/index.html

I am just learning to program in JS and one of my lessons involves this page. Rather than getting into the entire lesson (as I don't want all the answers just given to me), I am having trouble with the following:

I have a web form that is using "onclick" to execute a function that simply displays a table. Inside of the "buildTable" function is a function call to re-display the web form (which is in the "buildForm" function).

The problem I am having is that when it executes, the table displays and so does the web form. However, clicking on the radio button again (which should call the "buildTable" function) does nothing.

I originally went this route because when I just called the "buildTable" function, it would display the table, but I would lose everything else on the page, so I had to re-paint the entire page this way instead. If you have a suggestion how to do this better, I am listening.

Here is my code. I hope you can help.

Code:
<html>
<head><title>Computer Science 553 Lab Pages</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/JavaScript">
	function buildForm(){
		document.write("<link rel='stylesheet' type='text/css' href='style.css' />");
		document.write("<h1>Lab 3: Trig Functions on the Fly</h1>");
		document.write("<div align='center'>");
		document.write("<form id='angleSelect' name='angleSelect' method='post'>");
		document.write("<input type='radio' name='angleSelect' id='angleDegrees' value='1' onclick='buildTableDegrees(\"Degrees\")'>");
		document.write("<label for='angleSelect'>Degrees</label>");
		document.write("<input type='radio' name='angleSelect' id='angleRadian' value='1' onclick='buildTableRadians(\"Radians\")'>");
		document.write("<label for='angleSelect'>Radian</label>");
		document.write("</form>");
		document.write("</div>");
	}
	function buildTableDegrees(inText){
		buildForm();
		document.write("<div align='center'>");
		document.write("<table border='1'>");
		document.write("<tr><th>" + inText + "</th>");
		document.write("<th>sin(x)</th>");
		document.write("<th>cos(x)</th>");
		document.write("<th>tan(x)</th>");
		document.write("</tr>");
		for ( var i = 0; i < 13; i++ )	{
			openTableRow();
			writeTableData(i + " " + inText)
			writeTableData("sin(" + i + ")");
			writeTableData("cos(" + i + ")");
			writeTableData("tan(" + i + ")");
			closeTableRow();
		}
		document.write("</table>");
		document.write("</div>");
	}

	function buildTableRadians(inText){
		buildForm();
		document.write("<div align='center'>");
		document.write("<table border='1'>");
		document.write("<tr><th>" + inText + "</th>");
		document.write("<th>sin(x)</th>");
		document.write("<th>cos(x)</th>");
		document.write("<th>tan(x)</th>");
		document.write("</tr>");
		for ( var i = 0; i < 13; i++ )	{
			openTableRow();
			writeTableData(i + " " + inText);	// radians Column
			writeTableData("sin(" + i + ")");	// sin(x) Column
			writeTableData("cos(" + i + ")");	// cos(x) Column
			writeTableData("tan(" + i + ")");	// tan(x) Column
			closeTableRow();
		}
		document.write("</table>");
		document.write("</div>");
	}
	
	function writeTableData(inText){
		document.write("<td>" + inText + "</td>"); 
	}

	function openTableRow(){
		document.write("<tr>");
	}

	function closeTableRow(){
		document.write("</tr>");
	}
</script>
</head>
<body>
<script type="text/JavaScript">buildForm();</script>
</div>

</body></html>