Java Reference
In-Depth Information
This solution includes an Update button which, when clicked, updates the order details in the
textarea
box. However, you may want to add event handlers to each form element and update
when anything changes.
Turning to the function that actually displays the order summary,
btnUpdateClick()
, you can
see that there is a lot of code, and although it looks complex, it's actually fairly simple. A lot of
it is repeated with slight modification. It also relies upon several helper functions to pull various
information from the selected form elements.
To save on typing and make the code a little more readable, this solution declares the
theForm
variable to contain the
Form
object After the variable's declaration, you then find
out which processor has been selected and get its cost and text with the
getDropDownInfo()
function:
function getDropDownInfo(element) {
var selected = element[element.selectedIndex];
return {
text: selected.text,
price: productDb[selected.value]
};
}
The
selectedIndex
property tells you which
Option
object inside the select control has been
selected by the user. You return a new object that contains the selected
Option
's text and the price
from the product database.
So to get the processor information, you pass
theForm.cboProcessor
to
getDropDownInfo()
and
assign the resulting object to
selectedProcessor
. You then calculate the total and update the order
details:
var selectedProcessor = getDropDownInfo(theForm.cboProcessor);
total = selectedProcessor.price;
orderDetails = "Processor : " + selectedProcessor.text;
orderDetails = orderDetails + " $" + selectedProcessor.price + "\n";
The same principle applies when you find the selected solid‐state drive, so let's turn next to the
check boxes for the optional extra items, looking first at the DVD‐ROM check box:
var dvdInfo = getCheckboxInfo(theForm.chkDVD);
if (dvdInfo.checked) {
total = total + dvdInfo.price;
orderDetails = orderDetails + "DVD-ROM : $" +
dvdInfo.price + "\n";
}
Again, you use a helper function—this one's called
getCheckboxInfo()
—to retrieve the information
about the given check box:
function getCheckboxInfo(element) {
return {