Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JonasGz

Não consigo mostrar o resultado do IMC do formulário

Por , em Javascript

Recommended Posts

JonasGz    0

JonasGz
Postado

Estou tentando fazer um formulário de cálculo do imc, porém não sei oque está errado, pois ele não mostra o resultado quando clico em

calcular segue o codigo, obg desde já!

<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
 
<script>
function calculoImc() {
 
var peso, altura, imc;
var formulario = document.getElementById("formulario");
peso = document.getElementById('peso').value;
altura = document.getElementById('altura').value;
imc = parseFloat(peso)/(parseFloat(altura)) * parseFloat(altura));
 
if (imc < 20) {
document.getElementById('resultadoImc').innerHTML = "Seu IMC é " + imc.toFixed(2) + "e  você está abaixo do peso!";
} else if (imc >= 20 && imc < 25) {
document.getElementById('resultadoImc').innerHTML = "Seu IMC é " + imc.toFixed(2) + "e  você está no peso ideal PARABÉNS!";
} else if (imc >= 25 && imc < 30) {
document.getElementById('resultadoImc').innerHTML = "Seu IMC é " + imc.toFixed(2) + "e  você está levemente acima do peso!";
} else if (imc >= 30 && imc < 35) {
document.getElementById('resultadoImc').innerHTML = "Seu IMC é " + imc.toFixed(2) + "e  você está no grau de obesidade 1!";
} else if (imc >= 35 && imc < 40  ) {
document.getElementById('resultadoImc').innerHTML = "Seu IMC é " + imc.toFixed(2) + "e  você está no grau de obesidade 2!";
} else if (imc >= 40 ) {
document.getElementById('resultadoImc').innerHTML = "Seu IMC é " + imc.toFixed(2) + "e  você está no grau de obesidade 3!";
}
 
}
</script>
 
</head>
<body>
 
<form method="post" name="frmImc" id="frmImc">
 
<fieldset>
<legend>CALCULO IMC</legend>
 
Nome:<input type="text" name="name" id="name"/><br><br>
Peso:<input type="text" name="peso" id="peso"/><br><br>
Altura:<input type="text" name="altura" id="altura"><br><br>
<input name="Enviar" value="Calcular" type="submit" onclick="calculoImc();"/>
 
<input type="text" name="resultadoImc" id="resultadoImc" disabled="disabled"/>
 
</fieldset>
 
</form>
 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Aperte Ctrl + Shift + J no teu Chrome ou Firefox e veja qual erro aparece no console.

A principio, um erro que eu vejo, é você estar usando o input type submit. Ele vai causar um refresh na página, que vai fazer com que as variáveis do javascript sejam reiniciadas, por tanto percam o valor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tá sobrando um ) ali em cima:

imc = parseFloat(peso)/(parseFloat(altura)) * parseFloat(altura));
troca por:

imc = parseFloat(peso)/(parseFloat(altura)) * parseFloat(altura);
e continua vendo o console de erros para corrigir o que aparecer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Para escrever em inputs, você deve usar .value e para escrever em outros elementos HTML que usa .innerHTML.

<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>

<script>
function calculoImc() {
  var formulario = document.getElementById("formulario");
  var peso = document.getElementById('peso').value;
  var altura = document.getElementById('altura').value;
  var imc = parseFloat(peso)/(parseFloat(altura) * parseFloat(altura));


  var $resultadoImc = document.getElementById('resultadoImc');
  if (imc < 20) {
    $resultadoImc.innerHTML = "Seu IMC é " + imc.toFixed(2) + ", e  você está abaixo do peso!";
  } else if (imc >= 20 && imc < 25) {
    $resultadoImc.innerHTML = "Seu IMC é " + imc.toFixed(2) + ", e  você está no peso ideal PARABÉNS!";
  } else if (imc >= 25 && imc < 30) {
    $resultadoImc.innerHTML = "Seu IMC é " + imc.toFixed(2) + ", e  você está levemente acima do peso!";
  } else if (imc >= 30 && imc < 35) {
    $resultadoImc.innerHTML = "Seu IMC é " + imc.toFixed(2) + ", e  você está no grau de obesidade 1!";
  } else if (imc >= 35 && imc < 40  ) {
    $resultadoImc.innerHTML = "Seu IMC é " + imc.toFixed(2) + ", e  você está no grau de obesidade 2!";
  } else if (imc >= 40 ) {
    $resultadoImc.innerHTML = "Seu IMC é " + imc.toFixed(2) + ", e  você está no grau de obesidade 3!";
  } else {
    $resultadoImc.innerHTML = 'valores incorretos';
  }
}


</script>

</head>
<body>

<form method="post" name="frmImc" id="frmImc">

<fieldset>
<legend>CALCULO IMC</legend>

Nome:<input type="text" name="name" id="name"/><br><br>
Peso:<input type="text" name="peso" id="peso"/><br><br>
Altura:<input type="text" name="altura" id="altura"><br><br>
<input name="Enviar" value="Calcular" type="button" onclick="calculoImc();"/>

<p id="resultadoImc"></p>

</fieldset>

</form>

</body>
</html>
lembrando que da forma que o código está, o usuário tem que informar a altura com . separando as casas decimais:

1.78 de altura.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito