Creating a simple calculation
I am trying to create a simple page that calculates the total cost of the shirts either individually or when they are added together for a final total. I think I am very close but I cant get the total to add or display in the input box. Maybe you guys can help me out. Its for a final project for class and my teacher cant seem to help me either. Please Internet help me!!!!!
here is my code: The start of the function is in the head and then the calling for the function is towards the bottom.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Shirts</title>
<link href="styles/eccomercestyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
// cost of items in dollars
var costShirt = 10;
function updateTotal(){
var tot = 0;
tot += f.blackShirt.value * costBlack +
f.whiteShirt.value * costWhite +
f.blueShirt.value * costBlue;
document.getElementById("cost").value = tot.toFixed(2);
}
</script>
</head>
<body>
<div id="logo"> <a href="index.html"> <img src="instalogo.png" width="493" height="91" alt="Return home"/> </a> </div>
<h1 style="font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: medium; color: #FF7208;">Choose a style.</h1>
<div id="container">
<table width="200" border="1" bordercolor="black">
<tbody>
<tr>
<td><img src="blackcottonPNG.png" width="160" height="200" alt="Choose a quantity"/>
<br>
<form action="" method="POST" name="myForm" id="myForm">
<label for="blackShirt"><strong>Black T $10.00 x </strong></label>
<select id="blackShirt">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</br>
</td>
<td><img src="whitecottonPNG.png" width="160" height="200" alt="Choose a quantity"/>
<br>
<label for="whiteShirt"><strong>Black T $10.00 x </strong></label>
<select id="whiteShirt">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</br>
</td>
<td><img src="bluecottonPNG.png" width="160" height="200" alt="Choose a quantity"/>
<br>
<label for="blueShirt"><strong>Black T $10.00 x </strong></label>
<select id="blueShirt">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</br>
</form></td>
</tr>
</tbody>
</table>
<h3>SUBTOTAL:</h3>
<div> $
<input type="text" id="cost" value="0" readonly size="3"/>
</div>
<div>
<input type="submit"/>
</div>
</main>
<script type="text/javascript">
var f = document.forms['myForm'];
var sel = document.getElementsByTagName("select");
for(var i=0; i<sel.length; i++) {
sel.onchange = function(){updateTotal()};
}
// here the form data is submitted to the server
f.onsubmit = function(){
alert("Your total cost will be: $" + f.cost.value);
return false;
}
</script>
</div>
</body>
</html>
AdChoices