Ir ao conteúdo
Regras do Clube do Hardware

Javascript Calculadora dentro do blog

DiegoRLS

Por DiegoRLS
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por joseph_dev,

Posts recomendados

DiegoRLS
 

DiegoRLS

Postado
Postado

Olá a todos,

 

Estou criando um blog sobre paraquedismo e dentro dele irei colocar uma calculadora de carga alar (parâmetro usado no esporte), como faz um tempo que não uso JavaScript montei toda a estrutura mas acabei travando na hora de calcular o resultado.

 

O calculo a ser feito é através de três entradas do usuário (peso da pessoa, peso do equipamento e tamanho do velame) e o cálculo será:

((peso da pessoa+peso do equipamento)*2.2)/tamanho do velame

 

Além disto quero mostrar o nível de experiência baseado no resultado que seria o seguinte:

menor ou igual a 1 - Iniciante

1.1 até 1.3 - Intermediário

1.31 até 1.5 - Avançado

maior que 1.51 - Experiente

 

Vou deixar a estrutura que fiz até o momento e uma foto de como está ficando no blog. Quem poder me ajudar agradeço. 

<p>&nbsp;</p><h1 style="text-align: center;"><span style="font-family: Changa One;"><span style="font-weight: 400;">CALCULADORA DE CARGA ALAR</span></span></h1><div style="text-align: center;"><span><span style="font-family: ABeeZee;">Preencha o formulário abaixo.</span></span></div><div id="gtx-trans" style="left: 262px; position: absolute; top: 19.4375px;"><div class="gtx-trans-icon"></div></div>

<form name="calcform" method="post" action="">
   <fieldset>
     <label for="pessoa">Peso da Pessoa (kg):</label>
     <input type="text" name="pessoa" id="pessoa" value="70"/>

     <label for="equipamento">Peso do Equipamento (kg):</label>
     <input type="text" name="equipamento" id="equipamento" value="12"/>
     
     <label for="velame">Tamanho do Velame (ft):</label>
     <input type="text" name="velame" id="velame" value="190"/>

     <label></label>
     
	 <input type="button" value="Calcular" class="botao" onClick=calcular()/>

     <label></label>
     
     <label>Carga Alar:</label><label  ></label>
     <label>Nível de Experiência:</label>

   </fieldset>
</form>

 

 

Calculadora.png

DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado

Opa @DiF, beleza?

 

Na verdade não ta dando erro, o que eu não to conseguindo fazer é na hora que apertar o botão calcular ele mostrar os resultados. Já tentei usar formula comum e também uma função para realizar as contas, mas não funcionaram dentro desta estruturam que montei.

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@DiegoRLS Com jquery é bem fácil de fazer um cálculo:

  

$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	
  
  	var calculo = (((pessoa + equipamento) * 2.2) / velame);
    
    alert(calculo);
  
  });
});

Mas tem certeza que a fórmula é essa mesma?   o resultado foi um número altissmo, nem se compara com o que você busca com valores entre 1 e 1.35

 

Quanto a apresentar o resultado, bem aí vai ter que usar um switch case para cada resultado.

Além disso, você precisa usar um elemento por exemplo span, dentro do label para apresentar o reultado

DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado

@DiF realmente ficou bem fácil. O erro no resultado era porque o alert naturalmente é string, então usei o parseFloat e resolvi o problema, além disso usei o toFixed para mostrar apenas dois números depois da virgula.

 

Montei a estrutura do Switch, mas não sei se a localização do código está certo, e como exibir ele no label que está montado, não sei se devo dar um id pro switch para identifica-lo (nem sei se é possível), mas tá quase pronto...

  

<p>&nbsp;</p><h1 style="text-align: center;"><span style="font-family: Changa One;"><span style="font-weight: 400;">CALCULADORA DE CARGA ALAR</span></span></h1><div style="text-align: center;"><span><span style="font-family: ABeeZee;">Preencha o formulário abaixo.</span></span></div><div id="gtx-trans" style="left: 262px; position: absolute; top: 19.4375px;"><div class="gtx-trans-icon"></div></div>

<script type="text/javascript">
$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
	
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    
    document.getElementById('resultado').setAttribute("value", cargaAlar);
    });  
  
  switch (calculo) {
  case '<=1':
    console.log('Iniciante');
    break;
  case '>1 and <=1.3':
    console.log('Intermediário');
  case '>1.3 and <=1.5':
    console.log('Avançado');
  case '>1.5':
    console.log('Avançado');    
    break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
      
    document.getElementById('experiencia').setAttribute("value", ???);
	});
</script>

<form name="calcform" method="post" action="">
   <fieldset>
     <label for="pessoa">Peso da Pessoa (kg):</label>
     <input type="text" name="pessoa" id="pessoa" value="70"/>

     <label for="equipamento">Peso do Equipamento (kg):</label>
     <input type="text" name="equipamento" id="equipamento" value="12"/>
     
     <label for="velame">Tamanho do Velame (ft):</label>
     <input type="text" name="velame" id="velame" value="190"/>

     <label></label>
     <input type="button" value="Calcular" class="botao" onClick=calcular()/>
     
     <label></label>
     <label>Carga Alar: <input type="text" id="resultado" value=""></label>

     <label>Nível de Experiência: <input type="text" id="experiencia" value=""></label>

   </fieldset>
</form>

 

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@DiegoRLS Um dos principais erros na minha opinião é misturar elementos jquery e javascript puro. Use todo em jquery.

  

 document.getElementById('resultado').setAttribute("value", cargaAlar);

 

troque para:

  

$("#resultado").val(cargaAlar);

Porque esse campo #resultado, é um input do tipo text.. então definir um valor para esse campo precisa ser com a função val() do jquery. Diferente do caso da experiência, onde lá você vai inserir um texto no elemento.

 

Na linha:

  

<input type="button" value="Calcular" class="botao" onClick=calcular()/>

 

retire a chamada de função onclick, pois você já faz isso lá no codigo jquery

 

No switch, você coloca os resultados no console.log., e esta usando o resultado do calculo, no correto é usar a variavel quer você ajustou com toFixed.

 

No nível de experiência, podes colocar um campo span.

  

<label>Nível de Experiência:<span class="experiencia"> </span></label>

  

//enquanto for verdadeiro as expressões
switch (true) {
  case (cargaAlar <= 1): $(".experiencia").html("Iniciante"); break;
  case (cargaAlar > 1 && cargaAlar <= 1.3): $(".experiencia").html("Intermediário"); break; 
  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").html("Avançado"); break;
  case (cargaAlar > 1.5): $(".experiencia").html("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 }

 

 

PS:  o switch case... precisa ficar dentro da função de click do botão..

 

Então seu código completo fica dessa forma:

 

HTML: 

<form name="calcform" method="post" action="">
   <fieldset>
     <label for="pessoa">Peso da Pessoa (kg):</label>
     <input type="text" name="pessoa" id="pessoa" value="70"/>

     <label for="equipamento">Peso do Equipamento (kg):</label>
     <input type="text" name="equipamento" id="equipamento" value="12"/>
     
     <label for="velame">Tamanho do Velame (ft):</label>
     <input type="text" name="velame" id="velame" value="190"/>

     <label></label>
     <input type="button" value="Calcular" class="botao"/>
     
     <label></label>
     <label>Carga Alar: <input type="text" id="resultado" value=""></label>

     <label>Nível de Experiência:<span class="experiencia"> </span></label>

   </fieldset>
</form>

 

Jquery: 

$(document).ready(function() {
  var botao = $(".botao");

      botao.on("click", function() {
        var pessoa = $("#pessoa").val();
        var equipamento = $("#equipamento").val();
        var velame = $("#velame").val();

        var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
        var cargaAlar = calculo.toFixed(2);

        $("#resultado").val(cargaAlar);

        switch (true) {
          case (cargaAlar <= 1):
            $(".experiencia").html("Iniciante");
            break;
          case (cargaAlar > 1 && cargaAlar <= 1.3):
            $(".experiencia").html("Intermediário");
            break;
          case (cargaAlar > 1.3 && cargaAlar <= 1.5):
            $(".experiencia").html("Avançado");
            break;
          case (cargaAlar > 1.5):
            $(".experiencia").html("Experiente");
            break;
          default:
            console.log('Desculpe, houve erro no cálculo, tente novamente.');
        }    

  });
});

 

Veja funcionando: https://jsfiddle.net/dife/ur0z8epc/2/

DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado

Estou reativando o tóico para tirar um última dúvida...

 

Estou tentando exibir o resultado do switch case dentro do input igual ficou o resultado da cálculo, mas não estou conseguindo, quando uso o <input> o resultado do switch case não aparece, mas quando deixo dentro do <span> aparece normalmente, tem como exibir o resultado do switch case dentro de um input também para ficar padronizado?

  

<!-- CALCULADORA DE CARGA ALAR -->
<script type="text/javascript">
$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    $("#resultado").val(cargaAlar);

<!-- VERIFICAR NIVEL DE EXPERIENCIA -->    
  switch (true) {
	  case (cargaAlar <= 1.1): $(".experiencia").html("Iniciante"); break;
	  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").html("Intermediário"); break; 
	  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").html("Avançado"); break;
	  case (cargaAlar > 1.5): $(".experiencia").html("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 		} 
	});
});
</script>

<!-- FORMULARIO DE PREENCHIMENTO E RESULTADO -->
<form action="" method="post" name="calcform">
   <fieldset>
     <label>Peso da Pessoa (kg):</label>
     <input id="pessoa" name="pessoa" type="text" value="70" />

     <label>Peso do Equipamento (kg):</label>
     <input id="equipamento" name="equipamento" type="text" value="12" />
     
     <label>Tamanho do Velame (ft):</label>
     <input id="velame" name="velame" type="text" value="190" />

     <label></label>
     <input class="botao" type="button" value="Calcular" />
     
     <label></label>
     <label>Carga Alar: <input disabled id="resultado" value=""></label>
     <label>Nível de Experiência: <input disabled id="experiencia" value=""></label>
	 <!-- No span o resultado aparece normal <label>Nível de Experiência: <span class="experiencia"></span></label> -->
   </fieldset>
</form>

 

  • Solução
joseph_dev
 

joseph_dev

Postado
  • Solução
Postado

Mude o método html() por val() no trecho do switch: 

switch (true) {
  case (cargaAlar <= 1.1): $(".experiencia").val("Iniciante"); break;
  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").val("Intermediário"); break; 
  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").val("Avançado"); break;
  case (cargaAlar > 1.5): $(".experiencia").val("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
}

 

  • Curtir 1
DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado
7 horas atrás, joseph_dev disse:

Mude o método html() por val() no trecho do switch: 


switch (true) {
  case (cargaAlar <= 1.1): $(".experiencia").val("Iniciante"); break;
  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").val("Intermediário"); break; 
  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").val("Avançado"); break;
  case (cargaAlar > 1.5): $(".experiencia").val("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
}

 

 

@joseph_dev deu certo! Obrigado!

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!