title: Why is a HTML form field showing the calculations in the output field
body: <p>I've created a basic profit calculator which is pretty much working fine. My issue is that every time I enter a number into each of the relevant fields, you can see the workings out in the "Total profit" field. It first tells me my entry is NaN, then -infinity, and then shows the workings. Once I click on my calculate button, I am then finally displayed with the correct number. </p>
  
  <p>For this post I am not concerned with why it is producing the NaN (not a number), but why am I seeing it populated in the field in the first place. I want this field to remain blank until I click Calculate, and then see the resulting number. I suspect it's to do with my JavaScript code but I am a complete newbie - and very stuck. </p>
  
  <p>Your thoughts are most appreciative. </p>
  
  <pre><code>&lt;form id="profitCalculator" action="" class="dark-matter"&gt;
  &lt;h1&gt;Profit Calculator&lt;/h1&gt;
  
  &lt;fieldset&gt;
  &lt;p&gt;&lt;label&gt;Case Cost:&lt;br /&gt;£
  &lt;input name="casecost" type="text" value="" size="14" maxlength="8" /&gt;&lt;/label&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;label&gt;Units per case:&lt;br /&gt;&amp;nbsp; &lt;input name="packs" type="text" value="1" size="14" maxlength="8" /&gt;&lt;/label&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;label&gt;Sell price:&lt;br /&gt; £ &lt;input name="sell_price" type="text" value="" size="14" maxlength="8" /&gt;&lt;/label&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;input type="button" class="button" OnClick="Circle_calc(this.form);" value="Calculate"&gt;&lt;/p&gt;
  
  &lt;p&gt;Total Profit:&lt;br /&gt; £ &lt;input name="profit" type="text" value="0" autocomplete="off" SIZE=14&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;input type="reset" class="button" value="Reset"&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the JavaScript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  document.getElementById('profitCalculator').onclick = function () {
  var casecost = this.elements['casecost'].value || 0;
  var packs = this.elements['packs'].value || 0;
  var sell_price = this.elements['sell_price'].value || 0;
  var profit = (sell_price - casecost) / packs;
  this.elements['profit'].value = profit.toFixed(2);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you</p>