Answers to Exercises - Beginning JavaScript - page 617

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 {