<html>
<head>
<script language="JavaScript">
var pizza = 0;
var tops = 0;
var count = 0;
var total = 0;
var subtotal = 0;
var tax = 0;
var cheesecost = 0;
function getcheese(yesno) {
switch (yesno) {
case 1:
if (type == 1) {
cheesecost = 1;
}
if (type == 2) {
cheesecost = 1;
}
if (type == 3) {
cheesecost = 1.25;
}
if (type == 4) {
cheesecost = 1.4;
}
break;
case 2:
cheesecost = 0;
break;
}
}
function calc() {
count = document.getElementById("toppingbox").value;
subtotal = pizza + (tops * count) + cheesecost;
tax = parseFloat(subtotal) * .06;
total = parseFloat(tax) + parseFloat(subtotal);
alert(cheesecost);
document.getElementById("taxbox").value = tax.toFixed(2);
document.getElementById("subtotalbox").value = subtotal.toFixed(2);
document.getElementById("totalbox").value = total.toFixed(2);
}
function gettype(type) {
if (type == 1) {
pizza = 4;
tops = .5;
}
if (type == 2) {
pizza = 7.25;
tops = .6;
}
if (type == 3) {
pizza = 9.25;
tops = .75;
}
if (type == 4) {
pizza = 12.9;
tops = .9;
}
}
</script>
</head>
<body style="padding-top: 64px; background-color: #e6e6e6">
<center>
<h1>Online Pizza Order Form</h1>
</center>
<hr noshade="noshade" style="text-align: center;width: 35%; height: 6px; color: gray; border-style: ridge; border-color: grey; border-width: 2px">
<form>
<div style="text-align: center;">
<div style="text-align: center; padding-left: 24px; padding-top: 16px; padding-right: 24px; padding-bottom: 16px; border-width: 2px; border-style: ridge; background-color:#d8d8d8; width:28%; margin-bottom: 4px;">
<hr noshade="noshade" style="text-align: center; margin-top:-12px; height: 2px; color: gray; border-style: ridge; border-width: 2px"> <b>Select the pizza type</b>
<br>
<div style="padding-left: 64px; text-align: left; padding-top: 12px; padding-bottom: 12px;">
<table border="0">
<tr>
<td>1. 6' - $4.00</td>
<td>
<input type=radio name=pizzatype value="1" onclick="gettype(this.value)">
</td>
</tr>
<tr>
<td>2. 10' - $7.25</td>
<td>
<input type=radio name=pizzatype value="2" onclick="gettype(this.value)">
</td>
</tr>
<tr>
<td>3. 14' - $9.25</td>
<td>
<input type=radio name=pizzatype value="3" onclick="gettype(this.value)">
</td>
</tr>
<tr>
<td>4. 16' - $12.90</td>
<td>
<input type=radio name=pizzatype value="4" onclick="gettype(this.value)">
</td>
</tr>
</table>
</div>
<hr noshade="noshade" style="text-align: center; height: 2px; color: gray; border-style: ridge; border-width: 2px">
<!-- START TEXT INPUTS -->
<table border="0">
<tr>
<td style="font-weight: bold;">How many toppings do you want?</b> </td>
<td style="font-weight: bold;">
<input id="toppingbox" type="text" style="width:50px;" />
<br>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Do you want extra cheese?</td>
<td style="font-weight: bold;">Yes
<input type=radio name=checkcheese value="1" onclick="getcheese(this.value)">
<br>No
<input type=radio name=checkcheese value="2" onclick="getcheese(this.value)">
</td>
</tr>
</table>
<!-- END TEXT INPUTS -->
<!-- CALCULATE BUTTON -->
<hr noshade="noshade" style="text-align: center; height: 2px; color: gray; border-style: ridge; border-width: 2px">
<div style="text-align: center;">
<button onclick="calc()">Calculate</button>
</div>
<hr noshade="noshade" style="text-align: center; height: 2px; color: gray; border-style: ridge; border-width: 2px">
<!-- END CALCULATE BUTTON -->
<!-- START TOTALS -->
<table border="0">
<tr>
<td style="font-weight: bold;">Subtotal:</td>
<td>$
<input id="subtotalbox" readonly="readonly" type="text" style="width:64px; background-color: #bdbdbd; font-weight:bold;" />
</td>
</tr>
<tr>
<td style="font-weight:bold;">Tax Due:</td>
<td>$
<input id="taxbox" readonly="readonly" type="text" style="width:64px; background-color: #bdbdbd;" />
</td>
</tr>
<tr>
<td style="font-weight:bold;">Total Due:</td>
<td>$
<input id="totalbox" readonly="readonly" type="text" style="width:64px; background-color: #bdbdbd;" />
</td>
</tr>
</table>
<!-- END TOTALS -->
<hr noshade="noshade" style="text-align: center; margin-bottom:-8px; margin-top: 12px; height: 2px; color: gray; border-style: ridge; border-width: 2px">
</div>
</div>
</form>
<hr noshade="noshade" style="text-align: center; width: 35%; height: 6px; color: gray; border-style: ridge; border-color: grey; border-width: 2px">
</body>
</html>
cheesecost 变量应该根据比萨饼的大小而变化。当检查“是/否广播”按钮时，应该将芝士司机设置为0，或将其设置为与该特定披萨尺寸相关的奶酪价格。我已经坚持了 3 天了，我尝试了大约 12 种不同的方法。它们似乎都不起作用。由于某种原因，显示奶酪成本的警报始终为零，这是为什么呢？