Preciso apresentar o resultado dessa função na tela, estou usando o alert apenas para ver se está funcionando, mas preciso exibir ele como se fosse um parágrafo na tela. Já tentei usar o innerHTML, mas não consegui. Segue meu código:
<script type="text/javascript">
function calcula_imc(){
var altura = document.imcForm.altura.value;
var peso = document.imcForm.peso.value;
var quadrado = (altura * altura);
var calculo = (peso/quadrado);
if(calculo<18.5){
alert("IMC: " + calculo + " | Você está abaixo do seu peso ideal!");
}
else if(calculo>=18.5 && calculo<24.9){
alert("IMC: " + calculo + " | Você está em seu peso normal!");
}
else if(calculo>=25 && calculo<29.9) {
alert("IMC: " + calculo + " | Obesidade Grau 1!");
}
else if(calculo>=30 && calculo<39.9) {
alert("IMC: " + calculo + " | Obesidade Grau 2!");
}
else if (calculo>40)
alert("IMC: " + calculo + " | Obesidade Grau 3!");
}
</script>
<title>Calculo de IMC</title>
</head>
<style>
.bt{
background:#1C2230;
font-weight: bold;
color:#ffffff;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius: 20px !important;
}
.bt:hover{
font-weight: bold;
background:#4054B2;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius: 20px !important;
}
.caixa{
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius: 20px !important;
}
</style>
<body>
<form name="imcForm" id="imcForm" action="#">
<input class="caixa" placeholder="Informe a altura (Ex: 1.80)" type="text" id="altura" name="altura" maxlength="5" height="3px" width=10px/>
</p>
<input class="caixa" placeholder="Informe o peso (Ex: 90.0)" type="text" id="peso" name="peso" size="10" maxlength="5" height="3px" width=10px/>
</p>
<p><input class="bt" name="Enviar" type="submit" value="Calcular" onclick="calcula_imc()" />
</p>
</form>
Preciso também, formatar a saída da variável calculo, preciso que ela fique com 2 casas após a virgula. Já tentei usar o toFixed(2), mas também não funcionou.