Calculo de Imc com JavaScript

Front-end JavaScript
#1

Olá! Criei esse pequeno formulário para cálculo de IMC. A função JavaScript está fazendo o cálculo. Porém, na hora de exibir o resultado no campo “resultado” do formulário, o valor aparece e some rapidamente. Como faço para que o resultado permaneça, ou para que o resultado seja exibido abaixo do formulário como texto? (PS: Quando uso o “document.write”, ele redireciona para outra página que exibe apenas o resultado, e eu quero que tudo seja exibido na mesma página).
Segue o código.

<html>
<meta charset="UTF-8">

<head> CÁLCULO DO IMC 
<script type="text/javascript">
function CalculoImc(){
var peso = parseFloat(document.formImc.peso.value);
var altura = parseFloat(document.formImc.altura.value);
var imc = peso/(altura*altura);
document.formImc.resultado.value = imc.toFixed(2);
	
}
  
</script>
</head>
<body>

<form action="imc.html" name="formImc" method="post" onsubmit="return CalculoImc();">

<p>Peso: <input type="text" name="peso"></p>
<p>Altura: <input type="text" name="altura"></p>
<p><input type="submit" value="Calcular">
<input type="reset" value="Limpar"></p>
<p>Resultado:<input type="text" name="resultado"></p>

</form>

	
</body>
</html>
#2

Na verdade o document.write deve ser usado para escrever conteúdo enquanto a página está sendo carregada para quando terminar de carregar tudo estar escrito, por isso te dá esse comportamento de redirecionamento…

Quando se usa onsubmit no form, você precisa dar o return false para “bloquear” o envio dos dados, quando não se retorna nada ou retorna true, o submit entende que está “tudo bem”, ou “tudo foi validado, posso prosseguir” pegou?

Você pode resolver de duas formas:

1 - retornando false no fim da função CalculoImc…

function CalculoImc(){
    ...
    return false;
}

2 - retirando o evento onsubmit do form, trocando o type=“submit” para button e adicionado o evento onclick nele…

<p><input type="button" value="Calcular" onclick="CalculoImc();">

Perceba que não coloquei return antes de chamar a função, já que o formulário não será enviado… bons estudos!

O fato de você ter um form, não te obriga ter um submit pegou?

Submit deve ser usado se você pretende enviar os dados do form para o servidor…

#3

Valeu, cara! Deu certo!
Muito obrigado!

1 curtida