Answers to Exercises - Beginning JavaScript - page 618

checked: element.checked,
price: productDb[element.value]
};
}
This returns a new object that tells you the price of the component, as well as if the check box is
checked.
If the check box is checked, you add a DVD‐ROM to the order details and update the running total.
The same principle applies for the Blu‐ray check box.
Finally, you have the computer's case. Because only one case type out of the options can be selected,
you used a radio button group. Unfortunately, there is no selectedIndex for radio buttons as there
is for check boxes, so you have to go through each radio button in turn and find out if it has been
selected. The getRadioInfo() helper function does just that:
function getRadioInfo(elements) {
for (var i = 0; i < elements.length; i++) {
if (!elements[i].checked) {
continue;
}
var selected = elements[i];
var label = document.querySelector("[for=" + selected.id + "]");
return {
text: label.innerHTML,
price: productDb[selected.value]
};
}
}
It loops through the radio button group and checks each radio button's checked property. If it's
false , the loop iterates with the continue operator. But if the radio button is checked, you need to
get the text associated with the label for the selected radio button and the component's price from
the productDb array.
So, inside the btnUpdateClick() function, you can use this helper function to get everything you
need to add the selected computer case to the total and description:
var caseInfo = getRadioInfo(theForm.radCase);
total = total + caseInfo.price;
orderDetails = orderDetails + caseInfo.text + " : $" +
caseInfo.price;
Finally, set the textarea to the details of the system the user has selected:
orderDetails = orderDetails + “\n\nTotal Order Cost is “ + total;
theForm.txtOrder.value = orderDetails;