自动计算一些输入字段 javascript

Question

嗨，我正在尝试制作一个产品计算器，所以我需要自动计算一些输入字段

我的 html 看起来像这样：

<div id="Calculator">
<div id="TileAdhesive_Calculator" class="calculatorContainer">
<div id="select">
<label for="inp_LevellingDepth">Bed thickness mm</label>
<input id="inp_LevellingDepth" type="number" value="1" onChange="calculate();" onkeyup="calculate();" >
<label for="inp_LevellingArea">Area to be covered in m²</label>
<input id="inp_LevellingArea" type="number" onChange="calculate();" onkeyup="calculate();">
</div>      
<div id="LevellingResults" class="calculatorResult">
<h3 class="section-headline">Resultat</h3>          
<h4>The number of kg required.</h4>
<p><span id="LevellingRequirement"></span></p>
<p><input id="totat_kg" type="text" name="total_kilo" onkeyup="calculate_bags();"/></p>
<h4>The number of units required for your project <span id="LevellingPackSize"></span> kg sækker, der kræves til dit projekt.</h4>
<p><span id="LevellingBagsRequired"></span></p>
<p><input id="total_bags" type="text" name="total_bags" onkeyup="calculate_bags();"/></p>
</div>
</div>

我的JavaScript看起来像这样：

<script>
calculate = function()
{
var coverage_product = document.getElementById('inp_coverage_product').value;
var prod_depth = document.getElementById('inp_LevellingDepth').value;
var prod_area = document.getElementById('inp_LevellingArea').value; 
document.getElementById('totat_kg').value = coverage_product * prod_depth * prod_area;
}
calculate_bags = function()
{
var totat_kg = document.getElementById('totat_kg').value;
var packSize_prod = document.getElementById('inp_packSize_product').value;
document.getElementById('total_bags').value = totat_kg / packSize_prod;
}

我的问题是输入"您的项目所需的单位数"不会自动计算。

有人可以帮助我吗？

JSFiddle 链接她： https://jsfiddle.net/simondevs/1nzdkhem/9/

Answer 1

一旦您输入"totat_kg"或"total_bags"框，就会计算出来。这是因为 calculate_bags(( 函数是由这些字段上的"keyup"事件触发的，而其他两个字段上的"keyup"会触发 "calculate((" 函数。

假设您希望在任何输入上计算它，那么只需添加一个调用

calculate_bags();

作为计算函数的最后一行。

演示：https://jsfiddle.net/simondevs/1nzdkhem/9/

Answer 2

将所有内容都放入计算中，如下所示：

calculate = function() {
var coverage_product = document.getElementById('inp_coverage_product').value;
var prod_depth = document.getElementById('inp_LevellingDepth').value;
var prod_area = document.getElementById('inp_LevellingArea').value; 
document.getElementById('totat_kg').value = coverage_product * prod_depth * prod_area;
var totat_kg = document.getElementById('totat_kg').value;
var packSize_prod = document.getElementById('inp_packSize_product').value;
document.getElementById('total_bags').value = totat_kg / packSize_prod;
}

total_bags el 元素是 calculate_bags(( 上的更新，当The number of kg required.或The number of units required for your project的输入发生变化时会触发，如果我理解正确，这不是期望的行为。 onkeyup="calculate_bags((;" 处理程序似乎已经过时了。

否决票人可以详细说明吗？

https://jsfiddle.net/1nzdkhem/29/