How can I add 3 variables if one or two may not have a value?

Question

I have 3 variables that are fed from a form input ( type="text" ). Each input may or may not be entered by a user. I just want to add the variables together if they have any values entered. The problem is if any of them are left blank on the form I get NaN returned.

I really enjoy figuring these things out but I haven't been able to Google my issue, I'm happy to just be told what to Google to figure this out.

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

If only 1 or 2 of the variables have a value, I would like them to be totaled. So far all 3 have to have a value for the function to work.

Answer 1

You could ensure that the values are valid this way:

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

Basically grub , lime and aerseed are assigned 0 s, if their corresponding expressions evaluate to "falsy" values.

As a bonus, you could replace parseInt with + prefix, which does the same job and is a bit terser.

Answer 2

to avoid empty string "" Try this :

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

Answer 3

To achieve expected result, use eblow option of checking whether value is valid or not and parseInt value if available

  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

It sounds like you need to add a function that will default your input to zero if no value is given.

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

Maybe you can try this as well :)

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

Try

 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" >