Javascript 为什么HTML表单字段在输出字段中显示计算

我已经创建了一个基本的利润计算器，它运行得很好。我的问题是，每次我在每个相关字段中输入一个数字，您都可以在“总利润”字段中看到工作情况。它首先告诉我我的条目是NaN，然后是-infinity，然后显示工作情况。一旦我点击我的计算按钮，我最终会显示正确的数字

对于这篇文章，我不关心它为什么会产生NaN而不是一个数字，但为什么我首先看到它在现场被填充。我希望此字段保持空白，直到单击“计算”，然后查看结果数字。我怀疑这与我的JavaScript代码有关，但我是一个完全的新手，而且非常固执

你的想法非常感激

<form id="profitCalculator" action="" class="dark-matter">
<h1>Profit Calculator</h1>

<fieldset>
<p><label>Case Cost:<br />£
<input name="casecost" type="text" value="" size="14" maxlength="8" /></label></p>

<p><label>Units per case:<br />&nbsp; <input name="packs" type="text" value="1" size="14" maxlength="8" /></label></p>

<p><label>Sell price:<br /> £ <input name="sell_price" type="text" value="" size="14" maxlength="8" /></label></p>

<p><input type="button" class="button" OnClick="Circle_calc(this.form);" value="Calculate"></p>

<p>Total Profit:<br /> £ <input name="profit" type="text" value="0" autocomplete="off" SIZE=14></p>

<p><input type="reset" class="button" value="Reset"></p>
</fieldset>
</form>

还有JavaScript

<script type="text/javascript">
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);
}
</script>

谢谢

您已经在表单元素上设置了一个单击处理程序。由于单击事件气泡，因此单击表单气泡内的元素也会将其添加到表单中。因此，这将触发对任何元素认为是点击的任何内容的利润元素的更新

这张从折叠到的图表可能有助于澄清起泡的工作原理：

---

按钮上有一个Onclick事件，调用Circle\u calc函数

更改将表单元素作为参数传递的函数，它将起作用

Circle_calc = function (form) {
var casecost = form.elements['casecost'].value || 0;
var packs = form.elements['packs'].value || 0;
var sell_price = form.elements['sell_price'].value || 0;
var profit = (sell_price - casecost) / packs;
form.elements['profit'].value = profit.toFixed(2);
}

JSFIDLE