Jump to content
BrazucaBostero

Porcentagem com JavaScript

Recommended Posts

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

 

Capturar.PNG.eadbb10161ba58c2e5ae296441d0a19c.PNG

 

 

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

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By AlexandrePrezzi
      Pessoal, estou com um problema em um menu (nav) que possui 2 níveis
      Peguei esse código "pronto" porém está com algo que não consigo entender
       
      O link do segundo nível quando clica não redireciona para a página desejada ,  porém se eu clicar e pedir para abrir em nova guia dai ele funciona..
       
      Vou colocar o código aqui (tentei deixar o mais simples possível,  com apenas os itens a serem testados)
       
      Fico no aguardo
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); }); </script> <style> .navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } } </style> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">#####</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Testar</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" ><a href="http://www.google.com">Google</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>  

    • By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
    • By henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • By karleonel
      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .conteudo{ text-align: justify-all; } .texto{ font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; text-align: justify; } .titulo{ text-align: center; } </style> </head> <body id="minhaPagina"> <div class="conteudo"> <h1 class="titulo"></h1> <p class="texto"></p> <label for="digite">Digite a palavra:</label> <input name="campo" type="text" size="20" maxlength="6" /><br><br> <button type="button" onclick="VPalindromo('fcampo')" >Validar Palíndromo</button> </div> <script> function VPalindromo(str) { //var str = document.getElementByID("fcampo").value; var er = /[\W]/g var smallStr = str.toLowerCase().replace(er, ""); var x = smallStr.split("").reverse().join(""); if (x == smallStr) { alert("É um palindromo.") } else{ alert("Não é um palindromo.") } } </script> </body> </html> Pessoal,
       
      Eu fiz este código utilizando expressões regulares mas ao tentar validar ele sempre dá reposta como falsa.
      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .conteudo{ text-align: justify-all; } .texto{ font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; text-align: justify; } .titulo{ text-align: center; } </style> </head> <body id="minhaPagina"> <div class="conteudo"> <h1 class="titulo"></h1> <p class="texto"></p> <label for="digite">Digite a palavra:</label> <input name="campo" id="fcampo" type="text" size="20" maxlength="6" /><br><br> <button type="button" onclick="VPalindromo()" >Validar Palíndromo</button> </div> <script> function VPalindromo(str) { var er = /[\W]/g var smallStr = str.toLowerCase().replace(er, ""); var x = smallStr.split("").reverse().join(""); if (x == smallStr) return true; return false; } </script> </body> </html>  
    • By joagostini
      Olá, sou iniciante, e estou fazendo, como exercício, o jogo da velha. 'Desenvolvi' uma rotina de escolha de nível do jogo (serão 3 níveis) que deve aguardar a escolha do usuário para o programa prosseguir. Mas acho que não entendi direito como o javascript funciona, pois o que fiz não funciona e não encontrei uma solução (talvez não saíba como pesquisar corretamente o assunto na web).

      O começo do HTML (que é pouco) onde está um select para escolha do nível é este:
      <body>     <div id="dvmenu">         <button onclick="iniciar()">Iniciar Jogo</button>         <p><br></p>         <div id="dvQuemComeca">             <label for="nivel">Escolha o nivel:</label>             <select id="nivel" onChange='atualiza()'>                 <option value=0 selected>Escolha um nível</option>                 <option value=1>Nível 1 - Brincadeira</option>                 <option value=2>Nivel 2 - Surpresa</option>                 <option value=3>Nível 3 - Desafio</option>             </select>         </div>         <div id="jogador" class="jogador"></div>         <div id="vencedor" class="jogador"></div>     </div>  
      O código JS é este:
      //INÍCIO VEM DE LOAD function iniciar() {     casela = document.querySelectorAll('div[id^="p"]');     for (let cas of casela) {         cas.innerHTML = '';     }     for (let i = 0; i < 9; i++){        tab = tab;     }     console.log(tab);     nivel = 0;      msg = '';     qtosLancesJog = 0;     sorteiaJogador();     //até aqui funcionou direito } //-------------------------------------------------------------------- //ESCOLHA DO NÍVEL DO JOGO function atualiza(){     let selecao = document.querySelector('#nivel');     let opcao = selecao.options[selecao.selectedIndex];     return opcao.value;    }   //--------------------------------------------------------------------   //SORTEIA QUEM VAI COMEÇAR JOGANDO //função para definir o jogador que inicia o tab function sorteiaJogador() {//funcionou direito     let quemComeca = parseInt(Math.floor(Math.random() * 2));     if (quemComeca == 0) {         msg = 'Computador';         //setTimeout(lanceCpu, 2000);//dá um intervalo antes do computador realizar o 1 lance         lanceCpu();     } else msg = 'Humano';//neste caso a rotina espera que o jogador clique no tabuleiro, qdo roda a função lancetab(pos)         lanceHumano();     document.querySelector('#jogador').innerHTML = `<br>O ${msg} começa!`; } //--------------------------------------------------------------------   //ESCOLHA RANDÔMICA, NIVEL = 1, Da POSIÇÃO DO LANCE DA CPU NO tabULEIRO function jogouCpu(){//funcionou direito //nível 1 modo randômico pos = Math.floor(Math.random() * 9); return pos; }   //função humana function lanceHumano(){     console.log('Estou na função humana');     do {         nivel = atualiza();         console.log(nivel);     } while (nivel === 0);     console.log(nivel + ' passei direto'); }  
      O problema está nesse do...while da function lanceHumano(). Segundo entendi, ele prosseguiria apenas quando nivel!== 0, caso contrário, ficaria 'preso' até o momento que o usuário escolhesse uma das opções. Pelo HTML percebesse que setei o select para value=0. Mas ele nem se dá ao trabalho de esperar um miléssimo de segundo, segue em frente com o valor que tiver, no caso 0. O while  não tem efeito. Essa minha perspectiva está errada? Se sim, o que fazer? (paradigma funcional, await?) Obrigado.
      P.S.. No código tem uns conole.logs que servem watch-dogs para ajudar a entender por onde vão as rotinas.
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.