I'm trying to build a single table that houses all of the pricing options I need. This should be simple, but I'm getting NaN responses in the cell meant to contain the calculation.
<!DOCTYPE html>
<html>
<body>
<table border="2">
<tr>
<th>Subscription Memberships</th>
</tr>
<tr>
<td>Subscription Type:
<select id="duration">
<option value="1MonthSub">Monthly Subscription</option>
<option value="3MonthSub">Quarterly Subscription</option>
<option value="6MonthSub">Bi-Annual Subscription</option>
<option value="yearSub">Yearly Subscription</option>
</select>
<br>
<input type="checkbox" id="discount">
I am eligible for the student, military, or senior discount.</td>
</tr>
<tr>
<td><span id="calculated"></span></td>
</tr>
</table>
<script>
function calcPrice() {
//Variables
var choice = document.getElementById("duration");
var dur = choice.options[choice.selectedIndex].text;
var price;
var per;
var output;
switch(dur) {
case "1MonthSub":
price = 65;
per = " / month";
break;
case "3MonthSub":
price = 220;
per = " / 3 months";
break;
case "6MonthSub":
price = 440;
per = " / 6 months";
break;
case "yearSub":
price = 900;
per = " / year";
break;
}//end switch
if (document.getElementById("discount").checked) {
price = price * 0.9;
}//end if
output = price + per;
return output;
}//end calcPrice()
document.getElementById("calculated").innerHTML = calcPrice();
</script>
</body>
</html>
The NaN cell SHOULD calculate the price based on the option selected from the dropdown and the true/false value of the checkbox. I've tried moving the script portions around, and when they're placed before the table nothing shows up in the cell at all. What am I missing here?
Aucun commentaire:
Enregistrer un commentaire