How can i still add up while a input field is empty?

November 11, 2021

Im having an issue with a javascript function which is very simple, it consists on adding three input fields but the issue is that it only works when all the input fields have a value. So if one of the input fields has no value my function does not add it as a 0 value.

function calcularCosts(){
    var change_type1 = document.getElementById('change_type1').value;
    var cost_lab = document.getElementById('cost_lab').value;
    var cost_labARS = parseFloat(change_type1) * parseFloat(cost_lab);
    document.getElementById('cost_labARS').value = cost_labARS;

    var change_type2 = document.getElementById('change_type2').value;
    var cost_lab2 = document.getElementById('cost_lab2').value;
    var cost_lab2ARS = parseFloat(change_type2) * parseFloat(cost_lab2);
    document.getElementById('cost_lab2ARS').value = cost_lab2ARS;

    var change_type3 = document.getElementById('change_type3').value;
    var cost_lab3 = document.getElementById('cost_lab3').value;
    var cost_lab3ARS = parseFloat(change_type3) * parseFloat(cost_lab3);
    document.getElementById('cost_lab3ARS').value = cost_lab3ARS;

    cost_obra = parseFloat(cost_lab) + parseFloat(cost_lab2) + parseFloat(cost_lab3);
    document.getElementById('cost_obra').value = cost_obra;

    cost_obraARS = parseFloat(cost_labARS) + parseFloat(cost_lab2ARS) + parseFloat(cost_lab3ARS);
    document.getElementById('cost_obraARS').value = cost_obraARS;
}


function Todas(){
    calcularCosts();
    costsInversa();
    
  }

<div class="form-group col-md-3">
                      <label for="change_type1">Tipo de cambio</label>
                      <input type="number"   step="00.01" name="change_type1" id="change_type1" onkeyup="Todas();"  class="form-control" >
                    </div>                    
                                  
                   
                    <div class="form-group col-md-3">
                       <label for="cost_lab">Costo de laboratorio 1 (USD-O)</label>
                       <input type="number"   step="00.01" id="cost_lab" name="cost_lab" onkeyup="Todas();" class="form-control"  >
                    </div>

                    <div class="form-group col-md-3">
                      <label for="cost_labARS">Costo de laboratorio 1 (ARS)</label>
                      <input type="number"   step="00.01" id="cost_labARS" name="cost_labARS" onkeyup="Todas();" class="form-control"  >
                    </div>
<div class="form-group col-md-3">
                      <label for="change_type2">Tipo de cambio</label>
                      <input type="number"   step="00.01" name="change_type2" id="change_type2"  onkeyup="Todas();" class="form-control" >
                    </div>

                    <div class="form-group col-md-3">
                      <label for="cost_lab2">Costo de laboratorio 2 (USD-O)</label>
                      <input type="number"   step="00.01" id="cost_lab2" name="cost_lab2" onkeyup="Todas();" class="form-control"  >
                    </div>

                    <div class="form-group col-md-3">
                      <label for="cost_lab2ARS">Costo de laboratorio 2 (ARS)</label>
                      <input type="number"   step="00.01" id="cost_lab2ARS" name="cost_lab2ARS" onkeyup="Todas();" class="form-control"  >
                    </div>
<div class="form-group col-md-3">
                      <label for="change_type3">Tipo de cambio</label>
                      <input type="number"   step="00.01" name="change_type3" id="change_type3" onkeyup="Todas();"  class="form-control" >
                    </div>

                    <div class="form-group col-md-3">
                      <label for="cost_lab3">Costo de laboratorio 3 (USD-O)</label>
                      <input type="number"   step="00.01" id="cost_lab3" name="cost_lab3" onkeyup="Todas();" class="form-control"  >
                    </div>

                    <div class="form-group col-md-3">
                      <label for="cost_lab3ARS">Costo de laboratorio 3 (ARS)</label>
                      <input type="number"   step="00.01" id="cost_lab3ARS" name="cost_lab3ARS" onkeyup="Todas();" class="form-control"  >
                    </div> 
<div class="form-group col-md-3">
                      <label for="cost_obra">Costo de mano de obra (USD-O)</label>
                      <input type="number"   step="00.01" id="cost_obra" name="cost_obra" onkeyup="Todas();" class="form-control"  >
                    </div>


                    <div class="form-group col-md-3">
                      <label for="cost_obraARS">Costo de mano de obra (ARS)</label>
                      <input type="number"   step="00.01" id="cost_obraARS" name="cost_obraARS" class="form-control"  >
                    </div>

So if a fill in every input field but i do not fill in for example the input field cost_lab3 it wont work at all anything in this function

>Solution :

You can use this pattern:
var change_type1 = document.getElementById('change_type1').value || "0"

If document.getElementById('change_type1').value results in "", "0" will be used.
To learn more about the or-operator you can have a look here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR