In my code, everyone gets to buy for free?

I was wondering if someone could help me troubleshoot my javascript code. I have an order form, that is supposed to calculated the subtotal, tax and total as the quantities of items to be purchased are entered on the form.
There are no syntax errors, according to the Firefox error console, and I have checked for typos but can’t see any.

All I am getting in the subtotal, tax and total spaces is $0.00 .

I am quite new to Javascript, and working through the HeadFirst Javascript book. This code is patterned after their doughnut order, which I was able to do successfully.

Thank you for your help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Kwasind Tuck Shop Orders</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="author" content=""/>
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
			
		<!-- link to external stylesheet -->
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<!-- embedded styles -->
		<style type="text/css">
			
			*	{
				margin: 0;
				padding: 0;
				font-family: arial, sans-serif;
			}
			
			body {
						background-color: #d6e0a9;
						font-size: 12px;
						}
			
			#frame {
							background-color: #ddd;
							width: 700px;
							height: 600px;
							margin: 15px auto;
							border: 2px solid #6a8000;
							padding: 10px 10px 20px 10px;
							}
			
			h1, h2	{
						text-align: center;				
						}
						
			h1	{
					margin-top: 10px;
					font-size: 1.4em;
					}
					
			h2	{
					font-size: 1em;
					font-style: italic;
					}
					
			div.item, div.label {
							margin-top: 10px;
							text-align: right;
							}
							
			form {
					margin-top: 10px;
					}
							
			#bottomfield input 	{
						margin-left: 5px;
						text-align: center;
						}
						
			#topfield input	{
										padding-left: 3px;
										}
						
			fieldset {
							border: 1px solid #6a8000;
							}
						
			legend {
						color: #6a8000;
						font-size: 1.1em;
						font-style: italic;
						padding: 5px;
						}
						
			#topfield	{
							width: 650px;
							}
							
			#bottomfield	{
							width: 650px;
							}
							
			#personalInfo	{
									width: 300px;
									height: 160px;
									float: left;		
									margin-left: 20px;
									padding-right: 10px;
									}
									
			#total	{
						width: 300px;
						height: 160px;
						float: right;
						margin-left: 20px;
						padding-right: 10px;
						}
						
			#order	{
							width: 650px;
							margin: 20px 0 20px 20px;
							}

							
			#clothing	{
								width: 300px;
								float: left;
								padding: 10px;
								}
								
			#miscellaneous	{
										width: 300px;
										float: right;
										padding: 10px;
										}
										
			#submit, #reset {
										margin: 30px 0 0 60px;
										}			
		
		</style>
		
		<script type = "text/javascript">
			
			function updateOrder()
			{
				const TAXRATE = 0.13;
				var subTotal = 0;
				var tax = 0;
				var total = 0;
				
				var itemCost = new Array();
				itemCost[0] = ("blackBucketballShirt", 20);
				itemCost[1] = ("whiteBucketballShirt", 20);
				itemCost[2] = ("kwasindShirt", 12);
				itemCost[3] = ("paddleShirt", 20);
				itemCost[4] = ("shakeitShirt", 15);
				itemCost[5] = ("vintageShirt", 20);
				itemCost[6] = ("blackHoodie", 35);
				itemCost[7] = ("vintageHoodie", 35);
				itemCost[8] = ("redBlanket", 20);
				itemCost[9] = ("blueBlanket", 20);
				itemCost[10] = ("stuffedBear", 20);
				itemCost[11] = ("stuffedMoose", 20);
				itemCost[12] =  ("ecoPen", 1.50);
				itemCost[13] = ("frisbee", 3);
				itemCost[14] = ("lantern", 12);
				itemCost[15] =  ("zipperPull", 3);
				itemCost[16] = ("redWaterBottle", 10);
				itemCost[17] = ("blueWaterBottle", 10);
				
				var numBlackBucketballShirt = parseInt(document.getElementById("blackBucketballShirt").value);
				var numWhiteBucketballShirt = parseInt(document.getElementById("whiteBucketballShirt").value);
				var numPaddleShirt = parseInt(document.getElementById("paddleShirt").value);
				var numShakeitShirt = parseInt(document.getElementById("shakeitShirt").value);
				var numVintageShirt = parseInt(document.getElementById("vintageShirt").value);
				var numBlackHoodie = parseInt(document.getElementById("blackHoodie").value);
				var numVintageHoodie = parseInt(document.getElementById("vintageHoodie").value);
				var numRedBlanket = parseInt(document.getElementById("redBlanket").value);
				var numBlueBlanket = parseInt(document.getElementById("blueBlanket").value);
				var numStuffedBear = parseInt(document.getElementById("stuffedBear").value);
				var numStuffedMoose = parseInt(document.getElementById("stuffedMoose").value);
				var numEcoPen = parseInt(document.getElementById("ecoPen").value);
				var numFrisbee = parseInt(document.getElementById("frisbee").value);
				var numLantern = parseInt(document.getElementById("lantern").value);
				var numZipperPull = parseInt(document.getElementById("zipperPull").value);
				var numRedWaterBottle = parseInt(document.getElementById("redWaterBottle").value);
				var numBlueWaterBottle = parseInt(document.getElementById("blueWaterBottle").value);
				
				var numItem = new Array();
				numItem = (numBlackBucketballShirt, numWhiteBucketballShirt, numPaddleShirt, numShakeitShirt, numVintageShirt, numBlackHoodie, numVintageHoodie,
									numRedBlanket, numBlueBlanket, numStuffedBear, numStuffedMoose, numEcoPen, numFrisbee, numLantern, numZipperPull, numRedWaterBottle,
									numBlueWaterBottle);
				
				for (var i = 0; i <= numItem.length - 1; i++)
				{
					if	(isNaN(numItem))
					{
						numItem = 0;
					}
					subTotal = subTotal + numItem[i] * itemCost[i, 1];
				}
				var tax = subTotal * TAXRATE;
				var total = subTotal + tax;
				document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
				document.getElementById("tax").value = "$" + tax.toFixed(2);
				document.getElementById("totalAmt").value = "$" + total.toFixed(2);				
			}
			
			function placeOrder()
			{
				if (document.getElementById("name").value == " ")
				{
					alert("I'm sorry, but you must provide your name before submitting an order.");
				}
				else if ((document.getElementById("minutes").value == " ") || isNaN(parseInt(document.getElementById("minutes").value)))
				{
					alert("I'm sorry, but you must provide the number of minutes until pick-up before submitting an order.");
				}
				else
				{
					// submit order to server ...
					form.submit();
				}
			}
				
		</script>
	
	</head>
	
	<body >
		<div id = "frame">
			<div id = "header">
				<h1>Camp Kwasind Order Form</h1>
				<h2>Enter the number of each item that you would like to order.</h2>
			</div>
	
			<form name = "orderform" action = "formHandler.php" method = "POST">
				<table>
				
					<tr id = "topfield">
						<td>
							<fieldset id = "personalInfo">
								<legend>Personal Information</legend>
					
								<div class = "label">
									Full Name: 
									<input type = "text" size = "20" maxlength = "40" id = "name" />
								</div>
						
								<div class = "label">								
									Camper's Name:
									<input type = "text" size = "20" maxlength = "40" id = "campername" />
								</div>
						
								<div class = "label">
									Phone Number:
									<input type = "text" size = "20" maxlength = "40" id = "phone" />
								</div>						
							
								<div class = "label">
									Email Address: 
									<input type = "text" size = "20" maxlength = "40" id = "email" />
								</div>
							</fieldset>
						</td>
					
						<td>
							<fieldset id = "total">
								<legend>Order Summary</legend>
								
								<div class = "label">								
									Subtotal:
									<input type = "text" size = "20" maxlength = "40" id = "subtotal" />
								</div>
						
								<div class = "label">
									Tax:
									<input type = "text" size = "20" maxlength = "40" id = "tax" />
								</div>						
							
								<div class = "label">
									Total:
									<input type = "text" size = "20" maxlength = "40" id = "totalAmt" />
								</div>
							</fieldset>
						</td>
					</tr>
					
					<tr id = "bottomfield">
						<td colspan ="2">
							<fieldset  id = "order">
								<legend>Order</legend>
									<div id = "clothing">
							
								<h2>Shirts, Hoodies and Blankets</h2>
				
								<div class = "item">
									Bucketball Shirt (black)
									<input type = "text" size = "2" maxlength = "5"  id ="blackBucketballShirt" onchange = "updateOrder();" />
								</div>	
						
								<div class = "item">					
									Bucketball Shirt (white)
									<input type = "text" size = "2" maxlength = "5"  id = "whiteBucketballShirt" onchange = "updateOrder();" />
								</div>
						
								<div class = "item">
									Kwasind Shirt
									<input type = "text" size = "2" maxlength = "5"  id = "kwasindShirt" onchange = "updateOrder();" />
								</div>		
								
								<div class = "item">
									Paddle Shirt
									<input type = "text" size = "2" maxlength = "5"  id = "paddleShirt" onchange = "updateOrder();" />
								</div>		
								
								<div class = "item">					
									"Shake It" Shirt
									<input type = "text" size = "2" maxlength = "5"  id = "shakeitShirt" onchange = "updateOrder();" />
								</div>
								
								<div class = "item">
									Vintage T-Shirt
									<input type = "text" size = "2" maxlength = "5"  id = "vintageShirt" onchange = "updateOrder();" />
								</div>
												
								<div class = "item">
									Kwasind Jesus Hoodie
									<input type = "text" size = "2" maxlength = "5"  id = "blackHoodie" onchange = "updateOrder();" />
								</div>
							
								<div class = "item">
									Vintage Hoodie
									<input type = "text" size = "2" maxlength = "5"  id = "vintageHoodie" onchange = "updateOrder();" />
								</div>
								
								<div class = "item">
									Fleece Blanket (blue)
									<input type = "text" size = "2" maxlength = "5"  id = "blueBlanket" onchange = "updateOrder();" />
								</div>	
								
								<div class = "item">
									Fleece Blanket (red)
									<input type = "text" size = "2" maxlength = "5"  id = "redBlanket" onchange = "updateOrder();" />
								</div>	
								</div>
						
								<div id = "miscellaneous">
					
								<h2>Miscellaneous Items</h2>
					
								<div class = "item">
									Cuddles, the Stuffed Bear
									<input type = "text" size = "2" maxlength = "5" id = "stuffedBear" onchange = "updateOrder();" />
								</div>
						
								<div class = "item">				
									Monti, the Stuffed Moose
									<input type = "text"  size = "2" maxlength = "5"  id = "stuffedMoose" onchange = "updateOrder();" />
								</div>
						
								<div class = "item">
									Eco-Friendly Pen
									<input type = "text" size = "2" maxlength = "5"  id = "ecoPen" onchange = "updateOrder();" />
								</div>
						
								<div class = "item">						
									Kwasind Frisbee (assorted colours)
									<input type = "text" size = "2" maxlength = "5"  id = "frisbee" onchange = "updateOrder();" />
								</div>
						
								<div class = "item">
									Mini Lantern
									<input type = "text" size = "2" maxlength = "5" id = "lantern" onchange = "updateOrder();" />
								</div>		
								
								<div class = "item">
									Paddle Zipper Pull
									<input type = "text" size = "2" maxlength = "5"  id = "zipperPull" onchange = "updateOrder();" />
								</div>
								
								<div class = "item">
									Water Bottle (red)
									<input type = "text" size = "2" maxlength = "5"  id = "redWaterBottle" onchange = "updateOrder();" />
								</div>
				
								<div class = "item">
									Water Bottle (blue)
									<input type = "text" size = "2" maxlength = "5"  id = "blueWaterBottle" onchange = "updateOrder();" />
								</div>
						
								<input type="submit" value="Submit Order" id = "submit" /> 
								<input type="reset" value="Reset" id = "reset" /> 
								
							</fieldset>
						</td>
					</tr>
				
				</table>
			</form >
		</div>
	</body>
	
</html>

You might have other problems, but I did a quick skim


itemCost[0] = ("blackBucketballShirt", 20);

Valid, but probably not what you wanted. I imagine you wanted to create an array literal


itemCost[0] = ["blackBucketballShirt", 20];

Always specify the radix argument for parseInt(). You want to use 10.

numItem is an array, so it will always be NaN. you probably meant to test one of the values in the array, like [I]numItem

itemCost[i, 1] should be itemCost[i][1]

also, the const keyword has poor browser support.

Thanks for looking at it. I will try your suggestions out and see what happens. (fingers crossed)

I made the changes that you suggested (silly mistakes on my part … newbiness at work) except for …

Always specify the radix argument for parseInt(). You want to use 10.

I don’t understand what you meant there, so I will have to look it up first.

The form still does not give me a total … but I am now getting $NaN instead of $0.00 .