Calculating a Table Decide on what table you will calculate in this Application
ID: 3537598 • Letter: C
Question
Calculating a Table
Decide on what table you will calculate in this Application and create a new, appropriately named, page in your website. Complete the XHTML code for the head and create a shell for the body. Write an appropriate headline and introductory paragraph and also the XHTML for the table and its header row. Link to this newly created page from your home page.
In place of the data rows for the table, write a <script> tag. Specify text/javascript as the type and as the source (src), use the XHTML page name with the .js extension. For example, if your page is named table.php, use the name table.js as the JavaScript source file.
Now create the table.js file, where you write the JavaScript code. Use a loop that generates one row of the table each time it executes. The document.write function lets you generate both XHTML tags and content for the page. Remember to start and end each row with the <tr> and </tr> tags, and to use the <td> and </td> tags to enclose the calculated values you want to display. The example below calculates 15%, 18%, and 20% tips for meals costing between $8 and $25.
Submit your pages to the W3C Validator (http://validator.w3.org/) and correct all errors. (Note: You may ignore an error concerning placement of the script element.) Include screenshots of the results in your submission. Include the full XHTML code for each page and screenshots of the pages as your web browser displays them. Summarize the steps you followed to create and perfect the website.
Explanation / Answer
I am using a script to calculate the total of a column of input fields where the user enters amounts. I customized this script for my form and it works, except that if one of the fields is left blank it display "NaN" in my total instead of counting the blank field as zero and giving me a real total.
This is in the <head>:
<script type="text/javascript">
function calculate() {
var total = 0;
for (var i = 1; i < arguments.length; i++) {
total += parseInt(arguments[i].value, 10);
}
arguments[0].value = total;
}
</script>
This is my input fields... ( I have 13 fields in total):
<input type="text" name="Tuition" size="15" tabindex="32">
This is the calculate button and the total field:
<input type="button" value="Calculate Column">
<input type="text" name="total" size="15" tabindex="0">
OR
Calculate sum from user input form fields:
n = parseInt(arguments[i].value, 10);
if (isNaN(n)) {
n = 0;
}
total += n;
or this does the same:
Code:
total += parseInt(arguments[i].value, 10) || 0;
Create a new page in your website:
Step 1: Sign up now and get a FREE domain!*
Step 2: Design your new website in minutes!
Step 3: You are live! Grow your business online!
To write a standard head and a script tag in the body:
The following would normally go in the <head> section of an HTML document:
Code:
<script language="JavaScript" type="text/javascript">
function doStuff {
document.write("<p>Some Stuff</p>"):
}
</script>
While the following would be put into the document body at the position where you would want to output to show up:
Code:
<p>
<script language="JavaScript" type="text/javascript">
var newVar = "Some Stuff";
document.write(newVar);
</script>
</p>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.