How to set decimals in JS?

Question

I’m not getting the right decimal places, where the error is?

function calcula() {

  var total = 0;
  $("span[id^=linha]:visible").each(function() {

    var val_unit = parseFloat($(".class_unit input", this).val().replace(",", "."));
    var qnt = $(".class_quant input", this).val();
    var sub_total = val_unit * qnt;

    if (!isNaN(sub_total)) $(".class_total input", this).val(sub_total.toFixed(2).replace(".", ","));

    total += parseFloat($("input[id^=total]", this).val().replace(",", "."));

    somar();

  });

  if (!isNaN(total)) $("#total input.value_total").val(total.toFixed(2).replace(".", ","));

}


//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 10;

//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var linhaAtual;


function AddCampos() {
  var hidden1 = document.getElementById("hidden1");
  var hidden2 = document.getElementById("hidden2");

  //Executar apenas se houver possibilidade de inserção de novos campos:
  if (iCount < totalCampos) {

    //Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
    hidden2.value = "";

    //Atualizando a lista dos campos que estão ocultos.
    //Essa lista ficará armazenada temporiariamente em hidden2;
    for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
      if (document.getElementById("linha" + iLoop).style.display == "none") {
        if (hidden2.value == "") {
          hidden2.value = "linha" + iLoop;
        } else {
          hidden2.value += ",linha" + iLoop;
        }
      }
    }
    //Quebrando a lista que foi armazenada em hidden2 em array:

    linhasOcultas = hidden2.value.split(",");


    if (linhasOcultas.length > 0) {
      //Tornar visível o primeiro elemento de linhasOcultas:
      document.getElementById(linhasOcultas[0]).style.display = "block";
      iCount++;

      //Acrescentando o índice zero a hidden1:
      if (hidden1.value == "") {
        hidden1.value = linhasOcultas[0];
      } else {
        hidden1.value += "," + linhasOcultas[0];
      }

      /*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!
      if (hidden2.value.indexOf(","+linhasOcultas[0]) != -1) {
      hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
      }else if (hidden2.indexOf(linhasOcultas[0]+",") == 0) {
      hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
      }else{
      hidden2.value = "";
      }
      */
      calcula();
    }
  }
}

function RemoverCampos(id) {
  //Criando ponteiro para hidden1:        
  var hidden1 = document.getElementById("hidden1");

  //Pegar o valor do campo que será excluído:
  var campoValor = document.getElementById("valor_unitario" + id).value;
  //Se o campo não tiver nenhum valor, atribuir a string: vazio:
  if (campoValor == "") {
    campoValor = "vazio";
  }

  if (confirm("O campo que contém o valor:\n» " + campoValor + "\nserá excluído!\n\nDeseja prosseguir?")) {
    document.getElementById("linha" + id).style.display = "none";
    iCount--;

    //Removendo o valor de hidden1:
    if (hidden1.value.indexOf(",linha" + id) != -1) {
      hidden1.value = hidden1.value.replace(",linha" + id, "");
    } else if (hidden1.value.indexOf("linha" + id + ",") == 0) {
      hidden1.value = hidden1.value.replace("linha" + id + ",", "");
    } else {
      hidden1.value = "";
    }

    calcula();
  }
}

$(document).ready(function() {
  $('span[id^=linha] input').on("input", calcula);
});

//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
  document.write("<span id='linha" + iLoop + "' style='display:none'><div class='class_unit'>Valor Unitário " + iLoop + ":<input type='text' name='valor_unitario" + iLoop + "' id='valor_unitario" + iLoop + "' /></div><div class='class_quant'>Quantidade " + iLoop + ": <input type='text' name='qnt" + iLoop + "' id='qnt" + iLoop + "' value='0' /></div><div class='class_total'>SubTotal " + iLoop + ": <input type='text' name='total" + iLoop + "' id='total" + iLoop + "' readonly='readonly' /></div> <input type='button' value='Remover' onclick='RemoverCampos(\"" + iLoop + "\")'></span>");
}


function somar() {
  var valor1 = parseInt(document.getElementById("v_total").value);
  var valor2 = parseInt(document.getElementById("v_total2").value);
  document.getElementById("v_totalG").value = (valor1 + valor2).toFixed(2);


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form1" action="" method="post">

  <div class="class_total" id="total">Total: <input id="v_total" class="value_total" readonly></input>
  </div>
  <br><br><br>
  <input type="button" value="Adicionar campos" onclick="AddCampos()">
  <br><br><input type="text" name="hidden1" id="hidden1">
  <input type="hidden" name="hidden2" id="hidden2">


  <div class="class_total2" id="total2">Total2: <input id="v_total2" class="value_total2" value="12,50" readonly></input>
  </div>


  <div id="totalG" class="class_totalG">TotalG: <input id="v_totalG" class="value_totalG" readonly></input>
  </div>
</form>

Thanks.

Answer 1

First you’re calling the function somar() within the loop .each, which will cause problems. The function should be called after the loop, when the values have been calculated.

Then you need to use parseFloat and not parseInt to work with decimals, but first you need to replace the comma by a period. Ex.:

var valor1 = parseFloat(document.getElementById("v_total").value.replace(",", "."));

And after the toFixed(2), replace the point with the comma.

function calcula(){
   
   var total = 0;
   $("span[id^=linha]:visible").each(function(){
      
      var val_unit = parseFloat($(".class_unit input", this).val().replace(",", "."));
      var qnt = $(".class_quant input", this).val();
      var sub_total = val_unit * qnt;

      if(!isNaN(sub_total)) $(".class_total input", this).val(sub_total.toFixed(2).replace(".", ","));
      
      total += parseFloat($("input[id^=total]", this).val().replace(",", "."));
      
   });

   if(!isNaN(total)) $("#total input.value_total").val(total.toFixed(2).replace(".", ","));
      somar();
   
}


//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 10;

//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var linhaAtual;


function AddCampos() {
   var hidden1 = document.getElementById("hidden1");
   var hidden2 = document.getElementById("hidden2");

   //Executar apenas se houver possibilidade de inserção de novos campos:
   if (iCount < totalCampos) {

      //Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
      hidden2.value = "";

      //Atualizando a lista dos campos que estão ocultos.
      //Essa lista ficará armazenada temporiariamente em hidden2;
      for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
         if (document.getElementById("linha"+iLoop).style.display == "none") {
            if (hidden2.value == "") {
               hidden2.value = "linha"+iLoop;
            }else{
               hidden2.value += ",linha"+iLoop;
            }
         }
      }
      //Quebrando a lista que foi armazenada em hidden2 em array:

      linhasOcultas = hidden2.value.split(",");


      if (linhasOcultas.length > 0) {
         //Tornar visível o primeiro elemento de linhasOcultas:
         document.getElementById(linhasOcultas[0]).style.display = "block"; iCount++;
      
         //Acrescentando o índice zero a hidden1:
         if (hidden1.value == "") {
            hidden1.value = linhasOcultas[0];
         }else{
            hidden1.value += ","+linhasOcultas[0];
         }
      
         /*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!
         if (hidden2.value.indexOf(","+linhasOcultas[0]) != -1) {
         hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
         }else if (hidden2.indexOf(linhasOcultas[0]+",") == 0) {
         hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
         }else{
         hidden2.value = "";
         }
         */
         calcula();
      }
   }
}

function RemoverCampos(id) {
   //Criando ponteiro para hidden1:        
   var hidden1 = document.getElementById("hidden1");

   //Pegar o valor do campo que será excluído:
   var campoValor = document.getElementById("valor_unitario"+id).value;
   //Se o campo não tiver nenhum valor, atribuir a string: vazio:
   if (campoValor == "") {
      campoValor = "vazio";
   }

   if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído!\n\nDeseja prosseguir?")){
      document.getElementById("linha"+id).style.display = "none"; iCount--;
   
      //Removendo o valor de hidden1:
      if (hidden1.value.indexOf(",linha"+id) != -1) {
         hidden1.value = hidden1.value.replace(",linha"+id,"");
      }else if (hidden1.value.indexOf("linha"+id+",") == 0) {
         hidden1.value = hidden1.value.replace("linha"+id+",","");
      }else{
         hidden1.value = "";
      }
      
      calcula();
   }
}

$(document).ready(function(){
   $('span[id^=linha] input').on("input", calcula);
});

//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
   document.write("<span id='linha"+iLoop+"' style='display:none'><div class='class_unit'>Valor Unitário "+iLoop+":<input type='text' name='valor_unitario"+iLoop+"' id='valor_unitario"+iLoop+"' /></div><div class='class_quant'>Quantidade "+iLoop+": <input type='text' name='qnt"+iLoop+"' id='qnt"+iLoop+"' value='0' /></div><div class='class_total'>SubTotal "+iLoop+": <input type='text' name='total"+iLoop+"' id='total"+iLoop+"' readonly='readonly' /></div> <input type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")'></span>");
}


function somar(){
    var valor1 = parseFloat(document.getElementById("v_total").value.replace(",", "."));
    var valor2 = parseFloat(document.getElementById("v_total2").value.replace(",", "."));
    var totalG = valor1 + valor2;
    if(!isNaN(totalG)) document.getElementById("v_totalG").value = totalG.toFixed(2).replace(".", ",");

   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form1" action="" method="post">

   <div class="class_total" id="total">Total: <input id="v_total" class="value_total" readonly></input> </div>
   <br><br><br>
   <input type="button" value="Adicionar campos" onclick="AddCampos()">
   <br><br><input type="text" name="hidden1" id="hidden1">
   <input type="hidden" name="hidden2" id="hidden2">


   <div class="class_total2" id="total2">Total2: <input id="v_total2" class="value_total2" value="12,50" readonly></input> </div>

   
   <div id="totalG" class="class_totalG">TotalG: <input id="v_totalG" class="value_totalG" readonly></input> </div>
</form>