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.
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);
writeTableData("sin(" + i + ")");
writeTableData("cos(" + i + ")");
writeTableData("tan(" + i + ")");
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>