lord_chemo Posted May 20, 2007 Share Posted May 20, 2007 Ok, I'm trying to make a page which has to create a table depending on a value given by the user. I can do this with prompts, but I want to do it with an input box, and then a button. I can make it generate the table correctly, but it deletes all the other coding on the page. I want it to make the table beneath the button The coding I have is this... <body><form name="stbc"><table><tr> <td> Number of Days </td> <td> <input type="text" name="daysfield" size="10" /> </td></tr><tr> <td> Budget for each day </td> <td> <input type="text" name="budgetfield" size="10" /> </td></tr></table><input type="button" value="Calculate" onClick="createBudget()" /></form><br /><br /><script type="text/javascript" language="javascript">function createBudget(){var days; var budget; var total;days = document.stbc.daysfield.value;budget = document.stbc.budgetfield.value; total = days * budget;document.write( "<table border='1'><tr><th>Days</th><th>Budget</th><th>Actual</th></tr>" ) for (var i = 1 ; i <= days ; i++) { document.write( "<tr>" ) document.write( "<td align='right'>" + i + "</td>" ) document.write( "<td align='right'>" + budget + "</td>" ) document.write( "<td> </td>" ) document.write( "</tr>" ) } document.write( "<tr><th>" + "Total Days" + "</th><th>Total Budget</th><th>Actual Total</th></tr>" ) document.write( "<tr><td align='right'>" + days + "</td><td align='right'>" + total + "</td><td> </td></tr>" ) document.write( "</table>" )}</script></body> Link to comment Share on other sites More sharing options...
jnutty1 Posted May 20, 2007 Share Posted May 20, 2007 Replace the createBudget function with this function createBudget(){var days; var budget; var total;var output;days = document.stbc.daysfield.value;budget = document.stbc.budgetfield.value; total = days * budget;output="<table border='1'><tr><th>Days</th><th>Budget</th><th>Actual</th></tr>";for (var i = 1; i <= days; i++) { output+= "<tr>";output+= "<td align='right'>" + i + "</td>";output+= "<td align='right'>" + budget + "</td>";output+= "<td> </td>";output+= "</tr>";} output+= "<tr><th>" + "Total Days" + "</th><th>Total Budget</th><th>Actual Total</th></tr>";output+= "<tr><td align='right'>" + days + "</td><td align='right'>" + total + "</td><td> </td></tr>";output+= "</table>";document.getElementById("result").innerHTML=output;} and at the end of the document between the last two BR tags insert this <div id="result"></div> This will place the value of output into the result div. Link to comment Share on other sites More sharing options...
lord_chemo Posted May 20, 2007 Author Share Posted May 20, 2007 Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.