HTML/CSS 无法使表单和按钮正常工作 [关闭]

Question

对于学校作业，我必须创建一个“甜甜圈/咖啡店”，其中我使用了 HTML 和 CSS，但我似乎无法为我的表单设置“计算总计”和“重置表单”按钮工作。

抱歉格式化，这是我的 HTML： http://pastebin.com/raw.php?i=xJ8SkqQ4

还有我的 CSS： http://pastebin.com/raw.php?i=zZbpt61Y

如果有人能找到我的错误，我将不胜感激。

编辑：真是个愚蠢的错误，我在选择下拉栏上忘记了我的 ID。再次感谢 Austin Greco！

Answer 1

你只是错过了甜甜圈上的 ID select：

<select id="DoughnutChoiceField">

如果使用chrome/ff调试器，可以调试，发现元素为null，表示document.getElementById找不到id。

function ResetForm()
				{
				document.getElementById("OrderForm").reset(); 
				}
			
			function ValidateNumber(value)
				{//We need to ensure that what you entered is a valid number
				if (isNaN(value))
					alert("What you entered is not a number. You entered a " + value +".")
				}

			function PlaceOrder()
				{
				const TAXRATE = 0.087;
				
				// Coffee blend constant prices
				const HOUSEBLENDPRICE = 8.00;
				const KENYAPRICE = 9.50;
				const BOURBONPRICE = 12.00;
				const NOBLENDPRICE = 0.00;
				
				// Coffee size constant prices
				const SMALLSIZEPRICE = 0.50;
				const MEDIUMSIZEPRICE = 0.75;
				const LARGESIZEPRICE = 1.00;
				const NOSIZEPRICE = 0.00;
				
				// Doughnut type constant prices
				const GLAZEDDOUGHNUTPRICE = 1.00;
				const CHOCOLATEDOUGHNUTPRICE = 1.50;
				const MAPLEDOUGHNUTPRICE = 1.50;
				const NOTYPEPRICE = 0.00;
				
				// Coffee Amount
				var NumberOfBags = parseInt(document.getElementById("NoBagsField").value);
				if (isNaN(NumberOfBags))
					{// if no entry, then set it to zero in the form
					NumberOfBags = 0;
					document.getElementById("NoBagsField").value = 0;
					}
				
				// Coffee Blend
				var BeanChoice = document.getElementById("CoffeeBlendField");
				var Blend = BeanChoice.options[BeanChoice.selectedIndex].value;
				if (Blend == "HouseBlend")
					{BeanPrice = HOUSEBLENDPRICE;}
				if (Blend == "KenianBlend")
					{BeanPrice = KENYAPRICE;}
				if (Blend == "BourbonBlend")
					{BeanPrice = BOURBONPRICE;}
				if (Blend == "NoBlend")
					{BeanPrice = NOBLENDPRICE;}
				
				// Price for Coffee Size
				var SizeChoice = document.getElementById("SizeChoiceField");
				var Size = SizeChoice.options[SizeChoice.selectedIndex].value;
				if (Size == "SmallSize")
					{SizePrice = SMALLSIZEPRICE;}
				if (Size == "MediumSize")
					{SizePrice = MEDIUMSIZEPRICE;}
				if (Size == "LargeSize")
					{SizePrice = LARGESIZEPRICE;}
				if (Size == "NoSize")
					{SizePrice = NOSIZEPRICE;}
					
				// Type of Doughnut
				var DoughnutChoice = document.getElementById("DoughnutChoiceField");
				var Doughnut = DoughnutChoice.options[DoughnutChoice.selectedIndex].value;
				if (Doughnut == "Glazed")
					{DoughnutPrice = GLAZEDDOUGHNUTPRICE;}
				if (Doughnut == "Chocolate")
					{DoughnutPrice = CHOCOLATEDOUGHNUTPRICE;}
				if (Doughnut == "Maple")
					{DoughnutPrice = MAPLEDOUGHNUTPRICE;}
				if (Doughnut == "NoDoughnut")
					{DoughnutPrice = NOTYPEPRICE;}
				
				// Doughnut Amount
				var NumberOfDoughnuts = parseInt(document.getElementById("DoughnutAmountField").value);
				if (isNaN(NumberOfDoughnuts))
					{// if no entry, then set it to zero in the form
					NumberOfDoughnuts = 0;
					document.getElementById("DoughnutAmountField").value = 0;
					}
				
				// Pricing
				var SubTotal = (((BeanPrice+SizePrice)*NumberOfBags) + ((DoughnutPrice)*NumberOfDoughnuts));
				var SalesTax = SubTotal * TAXRATE;
				var Total = SubTotal + SalesTax;
				document.getElementById("SubTotalField").value = "$" + SubTotal.toFixed(2);
				document.getElementById("SalesTaxField").value = "$" + SalesTax.toFixed(2);
				document.getElementById("TotalField").value = "$" + Total.toFixed(2);
				}

.body
{

}
.header
{
	font-size: 25px;
	top:10px;
	left:100px;
	width:900px;
	height:150px;	
	border-style: solid;
	border-color: #9A0E2A;
	border-width: 5px;
	display: table;
	color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.header	h1
{
	color: #AE5AAB;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.flipimage
{
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


.MainBody
{
    width: 800px;
    padding: 0px;
}
.left
{
    width: 250px;
    height: 600px;
    margin: 0px;
    padding: 0px;
    border-color: #9A0E2A;
	border-style: solid;
	border-width: 5px;
    float: left;
    text-align: center;
	position: absolute;
	color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.left img
{
	position: absolute;
    left: 0;
    bottom: 0;
}

.left h1
{
    color: DarkCyan;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
    margin-top: 50px;
	margin-left: 15px;
}
.left h2
{
    color: DarkCyan;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
	margin-left: 15px;
}
.left h3
{
    color: White;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
	margin-left: 15px;
}


.center
{
	position: absolute;
    width: 650px;
    border-style: solid;
	border-color: #9A0E2A;
	border-width: 5px; 
    margin-left: 250px;
    padding: 0px;
    height: 600px;
	color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.center h1
{
    color: RoyalBlue;
    text-align: center;
    vertical-align: top;
    line-height: 100px;
}

.center p
{
	color: RoyalBlue;
	text-indent:50px;
}

<div class="MainBody">
					</div>
					
					<div class="header">
					<img src="doughnut3.png" align="left" width="300px" height="150px">
					<h1>Doughnut Shop</h1>
					<img src="doughnut3.png" align="right" class="flipimage" width="300px" height="150px">
					</div>
					
					<div class="left">
					<h1 valign="top" align="left">Shop Address:</h1>
					<h3 valign="top" align="left">12345 E. Main Street</h3>
					<h2 valign="top" align="left">Phone:</h2>
					<h3 valign="top" align="left">(509) 123-4567</h3>
					<h2 valign="top" align="left">Email:</h2>
					<h3 valign="top" align="left">doughnutshop@hotmail.com</h3>

					
					
					<hr>
					<img valign="bottom" src="doughnut.png" width="250px" height="175px">

					
					</div>


					<div class="center">
					<h1>Order:</h1>
					
					
					
						
					<p><b>Customer Name:</b>
						<input type="text" name="state" value=""><br>
					</p>
					<p><b>Order Date:</b>
						<input type="date" name="date">
					</p>
					<hr>
					<form id="OrderForm">
					<p><b>Coffee Blend</b> 
						<select id="CoffeeBlendField">
							<option value="NoBlend" disabled selected style='display:none;'></option>
							<option value="HouseBlend">House Blend</option>
							<option value="KenianBlend">Kenian Blend</option>
							<option value="BourbonBlend">Bourbon Blend</option>
						</select>
					</p>
					
					<p><b>Coffee Size:</b>
						<select id="SizeChoiceField">
							<option value="NoSize" disabled selected style='display:none;'></option>
							<option value="SmallSize">Small</option>
							<option value="MediumSize">Medium</option>
							<option value="LargeSize">Large</option>
							
						</select>
					</p>
					

					<p><b>Quantity (1-20):</b>
						<input	type="text"
								id="NoBagsField"
								placeholder="#"
								value=""
								size = "1"
								onblur="ValidateNumber(this.value)">
						</p>
								
				
					<hr>
					<p><b>Doughnut Type:</b>
						<select id="DoughnutChoiceField">
							<option value="NoDoughnut" disabled selected style='display:none;'></option>
							<option value="Glazed">Glazed</option>
							<option value="Chocolate">Chocolate</option>
							<option	value="Maple">Maple</option>
						</select>
					</p>
					
					<p><b>Quantity (1-20):</b>
						<input	type="text"
								id="DoughnutAmountField"
								placeholder="#"
								value=""
								size = "1"
								onblur="ValidateNumber(this.value)">
					</p>
					<hr>
					<p><b>SubTotal:</b>
						<input	type="text"
								id="SubTotalField"
								value="">
					</p>
							
					<p><b>SalesTax:</b>
					<input	type="text"
							id="SalesTaxField"
							value="">
					</p>
							
					<p><b>Total Sale:</b>
					<input	type="text"
							id="TotalField"
									value="">
					</p>
					</form>
					<button onclick="PlaceOrder()">Calculate Totals</button>
					<button onclick="ResetForm()">Reset</button>

					</div>