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.