如果一個或兩個變量沒有值，我如何添加3個變量？

Question

我有3個變量從表單輸入（ type="text" ）提供。 用戶可以輸入或不輸入每個輸入。 我只想在輸入任何值時將變量添加到一起。 問題是如果他們中的任何一個在我獲得NaN返回的表單上留空。

我真的很喜歡把這些東西搞清楚，但是我無法將谷歌問題解決，我很高興能告訴谷歌如何解決這個問題。

function extrasCalc() {
    var grub = 0;
    var lime = 0;
    var aerseed = 0;

    grub = parseInt(document.getElementById("grubprice").value);
    lime = parseInt(document.getElementById("limeprice").value);
    aerseed = parseInt(document.getElementById("aerseedprice").value);
    var extrasSubtotal = grub + lime + aerseed;

    document.getElementById("sub").value = extrasSubtotal;

    console.log(grub);
    console.log(lime);
    console.log(aerseed);
    console.log(extrasSubtotal);
}

如果只有1或2個變量有值，我希望它們合計。 到目前為止，所有3個必須具有該功能的值才能工作。

Answer 1

您可以通過以下方式確保值有效：

function extrasCalc() {    
    var grub = +document.getElementById("grubprice").value || 0;
    var lime = +document.getElementById("limeprice").value || 0;
    var aerseed = +document.getElementById("aerseedprice").value || 0;

    var extrasSubtotal = grub + lime + aerseed;

    document.getElementById("sub").value = extrasSubtotal;

    console.log(grub);
    console.log(lime);
    console.log(aerseed);
    console.log(extrasSubtotal);
}

基本上grub ， lime和aerseed被指定為0 s，如果它們的相應表達式評估為“falsy”值。

作為獎勵，你可以用+前綴代替parseInt ，它可以完成同樣的工作並且有點粗略。

Answer 2

避免空字符串“”試試這個：

grub = +document.getElementById("grubprice").value || 0;
lime = +document.getElementById("limeprice" .value || 0;
aerseed = +document.getElementById("aerseedprice" ).value || 0;

Answer 3

要獲得預期結果，請使用eblow選項檢查值是否有效以及parseInt值（如果可用）

  function extrasCalc() { var grub = 0; var lime = 0; var aerseed = 0; grub = document.getElementById("grubprice").value; lime = document.getElementById("limeprice").value; aerseed = document.getElementById("aerseedprice").value; grub = grub? parseInt(grub) : 0; lime = lime? parseInt(lime): 0; aerseed = aerseed? parseInt(aerseed): 0; var extrasSubtotal = grub + lime + aerseed; document.getElementById("sub").value = extrasSubtotal; console.log(grub); console.log(lime); console.log(aerseed); console.log(extrasSubtotal); } 

  <input type = "text" id = 'grubprice'> <input type = "text" id = 'limeprice'> <input type = "text" id = 'aerseedprice'> <button onclick="extrasCalc()">Add</button><br> Total <input type = "text" id = 'sub'> 

codepen - https://codepen.io/nagasai/pen/gNVvYX

Answer 4

聽起來你需要添加一個函數，如果沒有給出值，則將輸入默認為零。

function extrasCalc() {
    var grub = defaultInputToZero( parseInt(document.getElementById("grubprice").value) );
    var lime = defaultInputToZero( parseInt(document.getElementById("limeprice").value) );
    var aerseed = defaultInputToZero( parseInt(document.getElementById("aerseedprice").value) );
    var extrasSubtotal = grub + lime + aerseed;

    document.getElementById("sub").value = extrasSubtotal;

    console.log(grub);
    console.log(lime);
    console.log(aerseed);
    console.log(extrasSubtotal);
}

function defaultInputToZero(inputValue){
    if( isNaN(inputValue) ){
        return 0;
    }
    return inputValue;
}

Answer 5

也許你也可以嘗試這個:)

function extrasCalc() {
    var grub = 0;
    var lime = 0;
    var aerseed = 0;

    grub = parseInt(document.getElementById("grubprice").value) ? parseInt(document.getElementById("grubprice").value) : 0;
    lime = parseInt(document.getElementById("limeprice").value) ?  parseInt(document.getElementById("limeprice").value) : 0;
    aerseed = parseInt(document.getElementById("aerseedprice").value) ?  parseInt(document.getElementById("aerseedprice").value) : 0;
    var extrasSubtotal = grub + lime + aerseed;

    document.getElementById("sub").value = extrasSubtotal;

    console.log(grub);
    console.log(lime);
    console.log(aerseed);
    console.log(extrasSubtotal);
}

Answer 6

嘗試

 function extrasCalc() { let grub = +grubprice.value; let lime = +limeprice.value; let aerseed = +aerseedprice.value; sub.value = grub + lime + aerseed; } 

 <input type="text" id="grubprice" > <input type="text" id="limeprice" > <input type="text" id="aerseedprice" > <br><br><button onclick="extrasCalc()">Calc</button><br><br> <input id="sub" >