javascript Porcentagem com JavaScript

[BrazucaBostero 0]

Olá!

 

Estou com uma dúvida daquelas sobre um código de calculo de desconto no javascript, abaixo segue o código

 

JS

        function calcValor() {
        //Declarando as variaveis  
         let preco, porcentagem, desconto, novopreco;
        //Obtendo dados atraves do prompt
        preco = parseFloat(document.getElementById("CAMPO_87").value);
        porcentagem = parseFloat(document.getElementById("CAMPO_85").value);
        alert(preco)
        document.getElementById("CAMPO_88").value = preco;
        alert(preco)
        //Realizando os calculos
        desconto = preco * porcentagem / 100;
        novopreco = preco - desconto;
        //O .toFixed(2) faz com que o valor seja corrijdo para duas casas decimais
        document.getElementById("CAMPO_88").value = novopreco;
        }

HTML

                        <div class="row">
                            <div class="col-md-2"><label class="a3label control-label" for="CAMPO_87">Valor da Mensalidade</label> <input class="a3formcontrol form-control" data-campo-id="@@87@@" data-nome="87 - Valor Mensalidade" data-tipo-documental-id="3" id="CAMPO_87"
                                    oninput="calcValor()" type="text" />
                            </div>

                            <div class="col-md-2"><label class="a3label control-label" for="CAMPO_85">Bolsa (%)</label> <input class="a3formcontrol form-control" data-campo-id="@@85@@" data-nome="85 - Bolsa (%)" data-tipo-documental-id="3" id="CAMPO_85" oninput="calcValor()"
                                    type="text" /></div>
                        </div>

                        <div class="row">
                            <div class="col-md-2"><label class="a3label control-label" for="CAMPO_88">Mensalidade Final</label> <input class="a3formcontrol form-control" data-campo-id="@@88@@" data-nome="88 - Valor Mensalidade (F)" data-tipo-documental-id="3" id="CAMPO_88"
                                    type="text" oninput="calcValor()" /></div>

 

 

O que acontece, tenho 2 problemas, que estou a quase 1 semana e não consigo resolver

 

 

Quando jogo somente o valor do campo mensalidade, ele deveria teoricamente aparecer no campo mensalidade final, independente ou não de haver desconto, porém para minha surpresa ele aparece exatamente igual a imagem abaixo

 

 

 

E minha outra dúvida é sobre a questão de , e .

Quando calculo desconto com , por exemplo. 2314,50, ele arredonda e quando coloco 2314.50, ele me da o valor exato. Alguém pode me dar uma luz? Desde já fico agredecido

[wanderval 19]

Simples erro clássico de programação sem validação de valores em cálculos.

1-zero não é divisível da mesma forma que null também não

2-comma é ignorada em cálculos você deve realizar um replace.

 

Obs: como você descreveu que o valor deveria aparecer independente do valor informado, você deve ter em mente que o erro ocorre mostrando NaN, pq a variável desconto está na formula toda iteração então e seu trabalho cuidar pra que ela tenha um valor default ou seja inicializada pra evitar isso já que está trabalhando com cálculos. 

 

solução:

function calcValor() {
  //Declarando as variaveis  
  let preco, porcentagem, desconto, novopreco;
  
  //Obtendo dados atraves do prompt
  preco = document.getElementById("CAMPO_87").value.replace(',','.');
  preco = parseFloat(preco);
  porcentagem = parseFloat(document.getElementById("CAMPO_85").value || 0);
  
  console.log(preco)
  
  document.getElementById("CAMPO_88").value = preco;
  
  console.log(preco)
  
  //Realizando os calculos
  desconto = preco * porcentagem / 100;
  novopreco = preco - desconto;
  
  //O .toFixed(2) faz com que o valor seja corrijdo para duas casas decimais
  document.getElementById("CAMPO_88").value = novopreco || "";
}

 

Sugestão de refactor

function calcValor() {
  //Declarando as variaveis  
  let preco, porcentagem, desconto, novopreco;
  
  //Obtendo dados
  preco = getPreco();
  porcentagem = getPorcentagem();
  
  //Set dados
  if(porcentagem){
    novopreco = calculoPorcentagem(preco, porcentagem);
    setMensalidadeField(novopreco);
  } else {
    setMensalidadeField(preco);
  }
}

function getPreco() {
  return parseFloat(document.getElementById("CAMPO_87").value.replace(',','.'));
}

function getPorcentagem() {
  return porcentagem = parseFloat(document.getElementById("CAMPO_85").value || 0);
}

function calculoPorcentagem(preco, porcentagem) {
  const desconto = preco * porcentagem / 100;
  return preco - desconto;
}

function setMensalidadeField(preco) {
  document.getElementById("CAMPO_88").value = preco;
}

 

jsbin: https://jsbin.com/yalokuyinu/edit?html,js,output