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

Question

我已经创建了一个基本的利润计算器，它的工作正常。我的问题是，每次我在每个相关字段中输入一个数字，您都可以在“总利润”字段中看到工作情况。它首先告诉我我的条目是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>

谢谢

Answer 1

您已在click元素上设置form处理程序。自click事件冒泡以来，点击里面的元素表单也会形成气泡。因此，这会触发任何元素认为点击的任何内容的利润元素更新。

来自DOM3 events spec的图表（此后已被折叠到DOM4 spec's events section）可能有助于澄清冒泡的工作原理：

Answer 2

您的按钮上有一个调用Circle_calc函数的Onclick事件。

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

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);
}

JsFiddle here