Question

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

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

该功能仅在包含所有三个值时才会更新。

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

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

现在如果parseInt提供NaN，这是假的，那么您将分配0。

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

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

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

此外，为您的输入分配一个类可能更容易，然后立即将它们全部完成并循环遍历它们。

Answer 2

我想，您可以重新编写下面的函数，我已将onkeyup方法替换为onblur方法，仅在焦点移出输入框而不是任何焦点时触发事件KEYUP。

HTML代码：

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

希望这有帮助！

Answer 3

试试这个

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

它可以解决任何问题

Answer 4

您也可以使用此

id("total").innerHTML = (isNaN(val_fenster) && isNaN(val_fassade) && isNaN(val_keller))? (val_fenster + val_fassade + val_keller): val_fenster;

在一些计算之后总结输入字段

4 个答案: