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

Sum up input fields after some calulations

本文关键字：输入 字段 求和 计算 经过      更新时间：2023-09-26

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

这是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;
}

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

仅当包含所有三个值时，该函数才会更新。

大概您的>0检查是为了处理有空白输入的情况，因为它们将解析为NaN和任何+ NaN == NaN。因此，最好的方法可能是在您的parseInt返回NaN时替换0。这可以很容易地完成，如下所示：

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

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

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

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

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

此外，为您的输入

分配一个类，然后一次获取所有输入并循环访问它们可能会更容易。

我想，您可以按如下方式重写函数，我已将 onkeyup 方法替换为 onblur 仅在焦点移出输入框而不是在任何键控上时才触发事件。

网页代码： 

<input id="fenster" onblur="val()" type="number">
<input id="fassade" onblur="val()" type="number">
<input id="keller" onblur="val()" type="number">
<div id="total"></div>

JS代码：

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

希望这有帮助！

试试这个

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);
if(!val1)
val1=0;
if(!val2)
val2=0;
if(!val3)
val3=0;
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;
 }

它将毫无问题地工作

你也可以使用它

id("total").innerHTML = (isNaN(val_fenster) && isNaN(val_fassade) && isNaN(val_keller))? (val_fenster + val_fassade + val_keller): val_fenster;
相关文章：