Problems with calculations in Javascript

Question

Well I edited the question, because I located the problem. I have a javascript responsible for making calculations with the values in the input, and I have a plugin Jquery Mask or Maskmoney to make the formatting of the entered value.

Both plugins have the same error.

Jquery Mask - When I type 1,00 the javascript that makes the calculation takes the value 100.

Maskmoney - When I type something, the javascript that makes the calculation thinks the field is empty.

I need to help, I thank you already

Follows the code:

$(document).ready(function() {
  $(".valor").on("input", function() {

    // Margem
    var valor = $(this).val();
    valor = valor.replace(".", "");
    valor = valor.replace(",", ".");

    // Custo
    var valorCusto = $("#custo").val();
    valorCusto = valorCusto.replace(".", "");
    valorCusto = valorCusto.replace(",", ".");


    var calculo = (parseFloat(valor) - parseFloat(valorCusto)) / parseFloat(valorCusto) * 100;
    var inputMargem = $(this).attr("margem");
    var resultadoMonetario = calculo.toFixed(2).replace(".", ",");
    $("#" + inputMargem).val(resultadoMonetario);
  });

  $(".margem").on("input", function() {

    // Margem
    var valorMargem = $(this).val();
    valorMargem = valorMargem.replace(".", "");
    valorMargem = valorMargem.replace(",", ".");

    // Custo
    var valorCusto = $("#custo").val();
    valorCusto = valorCusto.replace(".", "");
    valorCusto = valorCusto.replace(",", ".");


    var calculo = (parseFloat(valorCusto) * parseFloat(valorMargem) / 100) + parseFloat(valorCusto);
    var inputValor = $(this).attr("valor");
    var resultadoMonetario = calculo.toFixed(2).replace(".", ",");
    $("#" + inputValor).val(resultadoMonetario);
  });
});

$('.valores').mask('00.000.000,00', {
        reverse: true
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.js"></script>


Custo:
<input type='text' id='custo' class='custo valores' name='custo'>
<br>
<br> Valor:
<input type='text' id='valor1' class='valor valores' name='valor1' margem='margem1'> Margem:
<input type='text' id='margem1' class='margem valores' name='margem1' valor="valor1">

<br> Valor:
<input type='text' id='valor2' class='valor valores' name='valor2' margem='margem2'> Margem:
<input type='text' id='margem2' class='margem valores' name='margem2' valor="valor2">

the strange and that here in the stack it works. Example:

1st cost = 5,55 2nd margin = 1,00 Result = 5,61

Already the same problem code on my page and here:

JSFIDDLE

Answer 1

you need to replace the dots and commas, follows an example:

// instancie o objeto intl apenas uma vez.
var intl = new Intl.NumberFormat("pt-BR", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

var valor = {};
valor.text = "12.345.678,90";
valor.float = parseFloat(valor.text.replace(/[.]/gi, "").replace(",", "."));
valor.format = intl.format(valor.float)

console.log(intl, valor);

script change:

$(function () {
    var intl = new Intl.NumberFormat("pt-BR", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });

    var parseFloatIntl = function (value) {
        value = value.replace(/[.]/g, "").replace(",", ".")
        value = parseFloat(value) || 0;
        return value;
    }

    var input = {};
    input.custo = $('#custo');
    input.valor = $('.valor');
    input.margem = $('.margem');
    input.inputs = $('input');      

    input.valor.on("input", function () {
        var self = $(this);
        var inputMargem = $("#" + self.attr("margem"));

        var valor = {};
        valor.Margem = parseFloatIntl(self.val());        
        valor.Custo = parseFloatIntl(input.custo.val()); 
        valor.Calculo = (valor.Margem - valor.Custo) / valor.Custo * 100;

        inputMargem.val(intl.format(valor.Calculo));
        inputMargem.trigger('blur');
    });

    input.margem.on("input", function () {
        var self = $(this);
        var inputValor = $("#" + self.attr("valor"));

        var valor = {};
        var valor.Margem = parseFloatIntl(self.val()); 
        var valor.Custo = parseFloatIntl(input.custo.val());        
        var valor.Calculo = (valor.Custo * valor.Margem / 100) + valor.Custo;        

        inputValor.val(intl.format(valor.Calculo))
        inputValor.trigger('blur');
    });

    input.inputs.mask('00.000.000,00', {
        reverse: true
    });
});

Answer 2

Try it like this:

$(document).ready(function () {
$(".valor").on("input", function () {
    // Margem
    var valor = $(this).val();
    var valorCorrigido = parseFloat(adicionarPontos(valor));

    var valorFloat = parseFloat(valorCorrigido) || 0.0;

    // Custo  
    var valorCusto = $('#custo').val();
    var valorCustoCorrigido = parseFloat(removerPontos(valorCusto));
    var valorCustoFloat = parseFloat(valorCustoCorrigido) || 0.0;

    // Calculo
    var calculo = (parseFloat(valorFloat) - parseFloat(valorCustoFloat)) / parseFloat(valorCustoFloat) * 100;
    var inputMargem = $(this).attr("margem");

    $("#" + inputMargem).val(calculo.toFixed(2)).trigger('blur');
});
// Faz o calculo do valor com base na margem
$(".margem").on("input", function () {
    // Margem
    var valorMargem = $(this).val();  
    var valorMargemCorrigido = parseFloat(adicionarPontos(valorMargem));
    var valorMargemFloat = parseFloat(valorMargemCorrigido) || 0.0; 

    // Custo
    var valorCusto = $('#custo').val();
    var valorCustoCorrigido = parseFloat(removerPontos(valorCusto));
    var valorCustoFloat = parseFloat(valorCustoCorrigido) || 0.0; 

    // Cálculo
    var calculo = (parseFloat(valorCustoFloat) * parseFloat(valorMargemFloat) / 100) + parseFloat(valorCustoFloat);
    var inputValor = $(this).attr("valor");

    var resultadoMonetario = calculo.toFixed(2).toString();
    resultadoMonetario = resultadoMonetario.replace(".", ",");

    $("#" + inputValor).val(resultadoMonetario).trigger('blur');
});

function removerPontos(valor){
    valor = valor.replace(".","");
    valor = valor.replace(",",".");
    return valor;           
}

function adicionarPontos(valor){
   if(valor.length == 1){
       return valor;
   }
   else{
   if(valor.length == 2){
       return valor;
   }
   else{
   valor = valor.replace(",","");
     var inteiro = valor.substring(0,valor.length - 2);

   console.log(inteiro);

   var decimal = valor.substr(2);

   console.log(inteiro + "." + decimal);
   return inteiro + "." + decimal;
   }
   }
}
});

$('input').mask('00.000.000,00', {
    reverse: true
});