javascript - 经过一些计算后对输入字段求和

Question

嗨，我正在编写一个函数来汇总输入区域的值，它应该动态更改这些值。因此，当有人添加新值时，总值(value)应该自动更改。

这是 HTML 代码:

<input id="fenster" onkeyup="val()" type="number">
<input id="fassade" onkeyup="val()" type="number">
<input id="keller" onkeyup="val()" type="number">

这是 JS:

function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
var val3 = 0;
function val(){
val1 = parseInt(id("fenster").value);
val2 = parseInt(id("fassade").value);
val3 = parseInt(id("keller").value);
val_fenster = val1 * 30;
val_fassade = val2 * 30;
val_keller = val3 * 10;
id("total").innerHTML = ((val_fenster > 0 && val_fassade > 0 && val_keller > 0))?     val_fenster + val_fassade + val_keller: val_fenster;
}

该函数仅在包含所有三个值时更新。但如果它在每个值之后更新并且不输入第一个值，那就太好了。

Answer 1

The function only updates when all three values are included.

大概是你的>0检查用于处理存在空白输入的情况，因为它们将解析为 NaN和任何东西+ NaN == NaN 。所以你最好的方法可能是替换 0当你的parseInt返回NaN 。这可以很容易地完成，如下所示:

val1 = parseInt(id("fenster").value) || 0;

现在如果parseInt给出NaN ，这是假的，您将分配 0相反。

另请注意，您应该指定 parseInt 的基数:

val1 = parseInt(id("fenster").value, 10) || 0;

因为前导零会导致它认为它是八进制。

此外，为您的输入分配一个类，然后一次性获取它们并循环遍历它们可能会更容易。