A different take. Partly because I believe buttons are ugly, and partly because they aren't very extensible. For example, if you needed to add a button for a "quanity" (good lord...) of 5 you'd have to add another table row. That messes with your layout, your script, etc. Anyway, adjust as necessary:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>The Soda Shop</title>
<style>
body {
background-color : black;
color : darkorange;
font-family : helvetica;
text-align: center;
}
table {
margin : auto;
background-color : #993300;
border : solid firebrick medium;
padding : 8px;
}
hr {
width : 50%;
color : white;
}
</style>
<script>
function calc(q,c,f,p,t){
var price = p.value,
size = c.value;
if (f.value == 'coke'){
switch (size){
case 's':
price = '1.00';
break;
case 'm':
price = '1.05';
break;
case 'l':
price = '1.10';
break;
}
}
if (f.value == 'pepsi'){
switch (size){
case 's':
price = '1.05';
break;
case 'm':
price = '1.10';
break;
case 'l':
price = '1.15';
break;
}
}
if (f.value == 'dew'){
switch (size){
case 's':
price = '1.10';
break;
case 'm':
price = '1.15';
break;
case 'l':
price = "1.20";
break;
}
}
if (f.value == 'pepper'){
switch (size){
case 's':
price = '1.15';
break;
case 'm':
price = '1.20';
break;
case 'l':
price = '1.25';
break;
}
}
var taxRate = 0.07,
quantity = q.value,
sub = price*quantity,
subt = 1*sub+sub*taxRate,
total = t.innerHTML,
subTotal = 1*total+1*subt;
t.innerHTML = subTotal.toFixed(2);
}
function zero(t){
t.innerHTML = "0.00";
}
</script>
</head>
<body>
<h1>The Soda Shop</h1>
<hr/>
<p><b>figuring the price of sodas<br />
because you know you want one</b></p>
<form action="">
<input type="hidden" id="price" value=""/>
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Size</th>
<th>Flavor</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><select id="quantity">
<option value="0">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><select id="cup">
<option value="">--</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select></td>
<td><select id="flavor">
<option value="">--</option>
<option value="coke">Coke</option>
<option value="pepsi">Pepsi</option>
<option value="dew">Mountain Dew</option>
<option value="pepper">Dr. Pepper</option>
</select></td>
<td>$<span id="total">0.00</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><input type="reset" value="Clear" onclick="zero(total)"/> <input type="button" onclick="calc(quantity,cup,flavor,price,total)" value="Total"/></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
