Percentage calculator in Javascript

Question

I’m using the following code:

<script>
    function calcValor() {

        //Zera o campo total
        document.getElementById("CAMPO_78").value;

        //Declarando a variavel
        let preco, porcentagem, desconto, novopreco;

        //Obtendo dados atraves do prompt
        preco = parseFloat(document.getElementById("CAMPO_75").value);
        porcentagem = parseFloat(document.getElementById("CAMPO_85").value);

        if (isNaN(preco));
        //Realizando os calculos
        desconto = preco * porcentagem / 100;
        novopreco = preco - desconto;

        if (isNaN(novopreco));
        //O .toFixed(2) faz com que o valor seja corrijdo para duas casas decimais
        //document.write("O preço com desconto é R$ " + novopreco.toFixed(2) + "!!!");
        document.getElementById("CAMPO_78").value = 'R$ ' + novopreco;
    } 
</script>


<div class="row">
    <div class="col-md-2">
        <label class="a3label control-label" for="CAMPO_75">Valor da Mensalidade</label> 
        <input class="a3formcontrol form-control money" data-campo-id="@@75@@" data-nome="75 - Mensalidade" data-tipo-documental-id="3" id="CAMPO_75" onfocus="calcValor()" type="text" />
    </div>
    <div class="col-md-2">
        <label class="a3label control-label" for="CAMPO_76">Bolsa (%)</label> 
        <input class="a3formcontrol form-control" data-campo-id="@@85@@" data-nome="85 - Bolsa (%)" data-tipo-documental-id="3" id="CAMPO_85" type="text" onfocus="calcValor()"/>
    </div>
</div>

The calculation is done in the correct way, but in certain situations, as this below:

It ends up rounding to an integer value. And when I put one to change the number of the variable percentage, it does not change, but when I replace the . for , with the result.

Someone’s been there and can help me ?

Answer 1

What happens is that you are working with string and not with a real number, to work with decimal number that contains comma you need to turn it to decimal in the standard computational format that would be the decimal division by point (.).

In your case, it is not enough to use the function parseFloat(), you need to exchange the commas per point, using the function of replace().

Example:

• In that case the function parseFloat() retrieved the string and transformed it into a number, i.e., "90.55" is not a real number, the function itself recognized only 90 as a number and ignored ".55".

  let value = "90,55";
  parseFloat(value); 
  // retorno = 90
  

Solution

let value = "90,55";
value = value.replace(",", ".");
parseFloat(value.replace); 
// retorno = 90.55

• In this case, what was done ? Was given the value "90.55" by the user, then a character change was made in the string with the function replace(), was swapped the comma for a point, so I changed the string to "90.55", which is the ideal format to be used as a parameter in the function parseFloat().

---

• If you use a thousand separator, I also recommend using this form on replace() - value.replace(".", "").replace(",", ".") - first removes the thousand(.) separator to avoid problems in the decimal place and then changes the comma by a point.

  let value = "2.315,80";
  value = value.replace(".", "").replace(",", ".");
  parseFloat(value.replace); 
  // retorno = 2315.80