Form fix - calorie counter
I'm building a calorie counter and originally thought it could all be done in html but I was wrong. Here is my code:
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<style type="text/css">
form div {margin:10px 0;}
#cals {background-color:#fff;}
#totalCals {background-color:#fff;}
</style>
<script type="text/javascript">
function init(){
var df=document.forms[0];
df.reset();
var sel=df.getElementsByTagName('select');
for(var c=0;c<sel.length;c++) {
sel[c].onchange=function(){
if(this.value!='') {
df[6].value=parseFloat(df[6].value)+parseFloat(this.value);
}
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<form action="#">
<div>
Meats:
<select title="Meats">
<option value="100">Chicken Breast: = 100</option>
<option value="137">Ground Beef: 95% lean = 137</option>
<option value="142">Steak: (round/sirloin tip) = 142</option>
<option value="84">Crab: = 84</option>
<option value="110">Halibut: = 110</option>
<option value="110">Cod = 110</option>
<option value="91">Flounder: 91</option>
<option value="96">Tilapia: 96</option>
<option value="90">Lobster: = 90</option>
<option value="106">Shrimp: = 106</option>
<option value="112">Veal: = 112</option>
</select>
Veggies:
<select title="Veggies">
<option value="30">Asparagus: 10 medium spears = 30</option>
<option value="24">Beet-Greens: 3 cups = 24</option>
<option value="22">Cabbage: 1 cup = 22</option>
<option value="32">Celery: 2 cups = 32</option>
<option value="21">Chard: 3 cups = 21</option>
<option value="45">Cucumber: 1 medium = 45</option>
<option value="27">Fennel: 1 cup = 27</option>
<option value="15">Lettuce: 3 cups green = 15</option>
<option value="32">Onion: ½ cup = 32</option>
<option value="19">Red Radishes: 1 cup sliced = 19</option>
<option value="21">Spinach: 3 cups = 21</option>
<option value="27">Tomatoes: 1 medium = 22 1 cup = 27</option>
</select>
Fruit:
<select><option value="95">Apple: medium = 95</option>
<option value="44">Grapefruit: ½ = 44</option>
<option value="86">Orange: large = 86</option>
<option value="40">Strawberries: 10 medium: = 40</option>
</select>
Starch:
<select>
<option value="20">Melba Toast: 1 = 20</option>
<option value="24">Melba Snack: 2 = 24</option>
<option value="86">Grissini Breadstick: 1 = 20</option>
</select>
Dairy:
<select>
<option value="9">1 Tablespoon whole milk: = 9 </option>
</select>
<input type="reset">
</div>
<div>
<input id="cals" type="text" value="0" readonly="readonly">
<label for="cals">: calories</label>
<input id="totalCals" type="text" value="0" readonly="readonly">
</div>
</form>
</body>
</html>
As it stands it will add up the total calories from the drop down list, but I want the program to have a running total of all of the calories for the day below the first form box and have no clue how to do it. I don't know javascript at all and had help with what is above. Definitely appreciate any help.
