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. <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> Code (markup):
Your problem is vague. you need to tell in detail what you want to achieve. your current method of using Javascript to create contents dynamically, is the main cause of problem. it would be better if you explain what result you want. thanks
My plain and simple suggestion would be to use javascript for what javascript is meant to do - in other words, create the form/html with html, not via javascript, and use javascript to dynamically change the content if need be. A little unsure about what you're trying to do, but if I understand you correctly, you want the table to show when you click something, and to hide again when you click it again, or another radio button or something similar. That is fairly simple to achieve. I don't understand why you would want to create the whole form in javascript, though - it's wrong on so many levels.
PoPSicle is right you should be creating the page with HTML and modifying it with Javascript. <!DOCTYPE html> <html> <head> <script src="code.js"></script> </head> <body> <div id="content"></div> </body> </html> HTML: // code.js function makechanges(){ document.getElementById("content").innerHTML = "somethingnew"; } PHP: You could use methods like that to modify an existing form when needed, instead of creating a new one everytime with document.write
Btw, I understand this is a school project, but if the assignment is to build a form completely in js, the assignee is an idiot, and needs to be told as much. If the curriculum is stupid, there is no need to follow it verbatim - tell the teacher/professor/whatever that what he's teaching is BS, and show him a proper way to do things. Been there, done that. So many times...
I would suspect that given your massive/pointless overuse of document.write (to make some truly atrocious HTML at that) your onsubmit is likely calling document.write AFTER the document has finished loading. Doing so erases EVERYTHING when scripting is released, including the scripting that was being run! You document.write after the page is loaded, ALL OTHER MARKUP (and therein scripts) are deleted. One of the reasons we've been told for around a decade to stop using document.write... and no innerHTML isn't the right answer either. We have this thing called the DOM, and that's what you should be using, anything else is little more than shoving one's cranium up 1997's rectum. One of the reasons that from high school onwards I considered diploma's to be worth less than a sheet of bog roll; most of the 'educators' out there are only qualified to teach two things, and Jack left town... It's the old joke, in a field where 3 years is obsolete and 5 years is the scrap heap, what good is a 4 year program? But then, there's a reason back when I was handling hiring for a major 128 belt company in the '90's I recruited high-schoolers, they needed less deprogramming and could actually still be taught how to do things properly.