Start

End

Group

Hi everyone
I am working through the book again and am really having trouble getting my head round the shopping calculator (shopping.html, page 103), so would be grateful if you would review my comments to say if I have understood it correctly:.......
*****MY COMMENTS ARE LIKE THIS*************
--------------------------------------------------------------------------------------------------------------------------------------
*****THIS IS LARRY'S HTML - 'shopping.html'*********
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping Calculator</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- shopping.html -->
*****THE COMMAND '<form action=' WILL SEND AN ARRAY, ON SUBMITTING OF THE FORM, OF THE 5 VARIABLES, EACH WITH ITS VARIABLE NAME (E.G. "quantity, 4") BY METHOD "POST" WHICH WILL BE "INTERCEPTED" BY THE JS SCRIPT**********
<form action="" method="post" id="theForm">
<fieldset>
<p>Use this form to calculate the order total.</p>
<div><label for="quantity">Quantity</label><input type="number" name="quantity" id="quantity" value="1" min="1" required></div>
<div><label for="price">Price Per Unit</label><input type="text" name="price" id="price" value="1.00" required></div>
<div><label for="tax">Tax Rate (%)</label><input type="text" name="tax" id="tax" value="0.0" required></div>
<div><label for="discount">Discount</label><input type="text" name="discount" id="discount" value="0.00" required></div>
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
<div><input type="submit" value="Calculate" id="submit"></div>
</fieldset>
</form>
****NOW CALL THE JAVASCRIPT********
<script src="js/shopping1.js"></script>
</body>
</html>
******THIS IS NOT THE JS USED BY THE HTML BUT IS ESSENTALLY IDENTICAL EXCEPT WITH MORE OF LARRY'S COMMENTS.*************
// Script 4.2 - shopping.js
// This script calculates an order total.
// Function called when the form is submitted.
// Function performs the calculation and returns false.
******THIS STARTS THE FUNCTION THAT WILL BE CALLED AT THE END BY THE VARIABLE 'theForm' (MORE ABOUT THAT LATER).**********
function calculate() {
'use strict';
// For storing the order total:
******'total' IS A SIMPLE VARIABLE TO STORE THE DECIMAL NUMBER THAT WILL RESULT FROM THE CALCULATION***********
var total;
******MOVE THE VARIABLES FROM "POST" TO JS***************
// Get references to the form values:
var quantity = document.getElementById('quantity').value;
var price = document.getElementById('price').value;
var tax = document.getElementById('tax').value;
var discount = document.getElementById('discount').value;
// Add validation here later!
// Calculate the initial total:
total = quantity * price;
// Make the tax rate easier to use:
tax /= 100;
tax++;
// Factor in the tax:
total *= tax;
// Factor in the discount:
total -= discount;
// Display the total:
document.getElementById('total').value = total;
// Return false to prevent submission:
return false;
} // End of calculate() function.
*****NOW WRITE THE LISTENER*********
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
'use strict';
// Add an event listener to the form:
*****AND THIS IS WHERE I HAVE A PROBLEM........WHY ARE WE CALLING ALL OF THE DATA AGAIN BY WAY OF 'theForm'? IS 'document.getElementById('theForm')' CALLING THE WHOLE POST ARRAY AND WHY?
var theForm = document.getElementById('theForm');
*****CALL THE "calculate" FUNCTION*****
theForm.onsubmit = calculate;
} // End of init() function.
*****THIS CALLS THE "init" FUNCTION WHEN THE WINDOW LOADS******
// Assign an event listener to the window's load event:
window.onload = init;
---------------------------------------------------------------------------------------------------
The only other possibility that I can think of is that "var theForm = document.getElementById('theForm');" calls an array from POST that includes all of the variables stated above, and then passes them to the "calculate" function as required.
To put the question another way, is the variable e.g. "quantity" - the actual number - received directly from POST or secondarily from the array "theForm"?
I imagine the variable "the.Form" to look like this:
quantity,4
price,45.67
tax,20
discount,10.00
total,0.00
Any comments and advice would be greatly appreciated.
Regards
Max