Calculate several fields

Question

good evening, I’ve been trying to calculate several fields in javascript validating if they are with values, I’ve done something similar in javaSE, but I realized that it doesn’t work the way I imagined in javascript. Basically what I want is to calculate 10 fields, validating if they have values, and if they are not ignored

Code of what I’ve tried to do

// Calcula total da nota
function calcularTotalNota()
{
    // Campos
    var valorPrimeiroProduto = document.getElementById("total1").value;
    var valorSegundoProduto = document.getElementById("total2").value;
    var valorTerceiroProduto = document.getElementById("total3").value;
    var valorQuartoProduto = document.getElementById("total4").value;
    var valorQuintoProduto = document.getElementById("total5").value;
    var valorSextoProduto = document.getElementById("total6").value;
    var valorSetimoProduto = document.getElementById("total7").value;
    var valorOitavoProduto = document.getElementById("total8").value;
    var valorNonoProduto = document.getElementById("total9").value;
    var valorDecimoProduto = document.getElementById("total10").value;

    var totaNota = document.getElementById("totalNota").value;

    // Calcula todos os campos
    if(!valorPrimeiroProduto == null)
    {
        totaNota += valorPrimeiroProduto;
    }
}

The result should be shown in totalNota

Answer 1

You can use document.getElementsByClassName() to catch all the Fields at once, and assign to a array.

To make sure that the field is not null, just one if:

if (valorPrimeiroProduto) { } // só passa se não for nulo

You can also check if he is not a Nan (not a number):

if (!isNaN(valorPrimeiroProduto)) { } // passa se for número ou nulo!

See a suggestion below:

// Calcula total da nota
function calcularTotalNota()
{
    // Campos
    var inputs = document.getElementsByClassName('total')
    var valor = 0;
    
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].value && !isNaN(inputs[i].value)) {
            valor += parseInt(inputs[i].value);
        }
    }
    document.getElementById("resultado").value = valor;
 }

<div>
  <input type="text" value=null name="total" class="total"/>
  <input type="number" value=60 name="total" class="total"/>
  <input type="number" value=null name="total" class="total"/>
  <input type="text" value="trakinas de morango" name="total" class="total"/>
  <input type="number" value=12 name="total" class="total"/>
  <input type="number" value=0 name="total" class="total"/>
</div>
<br>
<div>
  <input type="button" value="Calcula Total" onclick="calcularTotalNota()">
  <input id="resultado" name="resultado" type="text" />
</div>

Sources:
Javascript - get value from Multiple inputs in an array
isNaN()