Jump to content
raphaelgs

Resultado da minha soma esta dando NaN

Recommended Posts

não estou conseguindo encaixar a logica para fazer a soma dar sem NaN

sendo que o campo do aluguel esta com o value vazio porque estou simulando caso o usuário não tenha aluguel.

 

segue abaixo meu código

<p class="campo1"><span>Mensalidade Faculdade: </span>R$<input id="mensalidade" value="10"></p>
<p class="campo1"><span>Aluguel: </span>R$<input id="aluguel" value=""></p>
<p class="campo1"><span>Água: </span>R$<input id="agua" value="30"></p>
<p class="campo1"><span>Luz: </span>R$<input id="luz" value="10"></p>
<script type="text/javascript">
    function despesas(){

        var mensalidade = document.getElementById("mensalidade").value;
        var aluguel = document.getElementById("aluguel").value;
        var agua = document.getElementById("agua").value;
        var luz = document.getElementById("luz").value;
        
        var total = parseInt(mensalidade) + parseInt(aluguel) + parseInt(agua) + parseInt(luz);

        document.getElementById("resultado").innerHTML = total;
    }

</script>

Share this post


Link to post
Share on other sites

o seu problema é simples você está tendo o erro 'NaN', porque o parseInt não consegue converter vazio para inteiro, é necessário que você crie uma validação e quando o valor for vazio deve substituir por zero (0). Mas o correto mesmo é que você utilizasse parseFloat pois está lidando com valores monetários e é muito comum lidar com valores fracionados.

 

HTML:

<p class="campo1"><span>Mensalidade Faculdade: </span>R$<input id="mensalidade" value="10"></p>
<p class="campo1"><span>Aluguel: </span>R$<input id="aluguel" value=""></p>
<p class="campo1"><span>Água: </span>R$<input id="agua" value="30"></p>
<p class="campo1"><span>Luz: </span>R$<input id="luz" value="10"></p>

<label>
  Resultado:
  <span id="resultado"></span>
</label>

<button onclick="despesas()">Calcular despesas</button>

JS:

function despesas(){
  var mensalidade = document.getElementById("mensalidade").value;
  var aluguel = document.getElementById("aluguel").value;
  var agua = document.getElementById("agua").value;
  var luz = document.getElementById("luz").value;

  var total = validValue(mensalidade) + validValue(aluguel) + validValue(agua) + validValue(luz);

  document.getElementById("resultado").innerHTML = total;
}

function validValue(value) {
  if(!value) {
    return 0;
  } else {
    return parseInt(value);
  }
}

exemplo: https://jsbin.com/sifeyugavu/edit?html,js,console,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 michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
×

Important Information

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