1

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.

3
  • Olá Bruno, vejo que seu formulário realiza a ação de atualizar a página. Você pretende recarregar a página ao clicar no botão Calcular ? Commented 31/07/2020 às 3:53
  • Oi @RXSD, seria melhor não atualizar Commented 31/07/2020 às 23:40
  • 1
    nesse caso, realizei alguns ajustes para seu html não atualize a página ao efetuar o click do botão, para você entender como realizei a solução desejada Commented 2/08/2020 às 0:34

2 Respostas 2

2

Algumas considerações:

  • não acedas a elementos do DOM por ID dessa maneira, dá uma olhada aqui: https://pt.stackoverflow.com/a/123106/129
  • em vez de if/else podes ter uma array com os valores e iterar essa array. Na verdade no teu if/else o valor à esquerda (maior que...) é irrelevante já que ele está a ser corrido sequencialmente como uma array faria também.
  • estás a usar form e um button type="submit" mas estás a fazer cálculos em JS, ou seja a form não pode ser submetida. Por isso tirei o submit no meu exemplo. Já que a tua dúvida era como apresentar o resultado na página.
  • o teu HTML tem </p> a mais, ou seja falta a tag de abertura <p>. Corrigi isso na minha resposta.

function calcula_imc() {
  const altura = document.getElementById('altura').value;
  const peso = document.getElementById('peso').value;
  const resultado = document.getElementById('resultado');
  const valor = (peso / Math.pow(altura, 2));

  const mapeamento = [
    [18.5, 'Você está abaixo do seu peso ideal!'],
    [24.9, 'Você está em seu peso normal!'],
    [29.9, 'Obesidade Grau 1!'],
    [39.9, 'Obesidade Grau 2!'],
    [Infinity, 'Obesidade Grau 3!'],

  ];
  let mensagem = '';
  for (let [peso, msg] of mapeamento) {
    mensagem = msg;
    if (peso > valor) break;
  }
  resultado.innerHTML = mensagem;
}
.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;
}

input {
width: 200px;
padding: 10px;
}
<p>
  <input class="caixa" placeholder="Informe a altura (Ex: 1.80)" type="text" id="altura" name="altura" maxlength="5" height="3px" width=10px/>
</p>

<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" type="button" value="Calcular" onclick="calcula_imc()" />
</p>
<p id="resultado"></p>

1

seja bem vindo ao StackOverFlow!

Para facilitar o seu entendimento, fiz umas alterações no seu código fonte para que sua página não seja recarregada, atrapalhando um pouco no momento de preencher o parágrafo com o texto da mensagem. Caso você deseje realizar o action do seu formulário e não esteja utilizando nenhuma linguagem de programação back-end, basta seguir os passos encontrados nessa resposta .

Como você tentou usar os métodos toFixed e innerHTML, resolvi aplicar no seu código para você ver como funciona com essas funcionalidades JS.

Basta executar o código abaixo, qualquer dúvida e eu souber responder, estou aqui para ajudá-lo!

 function calcula_imc(){
        var altura = document.getElementById("altura").value;
        var peso = document.getElementById("peso").value;

        var quadrado = (altura * altura);

        var calculo = (peso/quadrado);
        calculo = calculo.toFixed(2); 

        var texto = "";

        if(calculo<18.5){
        texto = "IMC: " + calculo + " | Você está abaixo do seu peso ideal!";
        alert(texto); 
        }
        else if(calculo>=18.5 && calculo<24.9){ 
        texto = "IMC: " + calculo + " | Você está em seu peso normal!";
        alert(texto);
        }
        else if(calculo>=25 && calculo<29.9) {
        texto = "IMC: " + calculo + " | Obesidade Grau 1!";
        alert(texto);
        }
        else if(calculo>=30 && calculo<39.9) {
        texto = "IMC: " + calculo + " | Obesidade Grau 2!";
        alert(texto);
        }
        else if (calculo>40){
        texto = "IMC: " + calculo + " | Obesidade Grau 3!";
        alert(texto);
        }
        document.getElementById("paragrafo").innerHTML = texto;
    }
.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;
    }
 <input class="caixa" placeholder="Informe a altura (Ex: 1.80)" value="" type="text" id="altura" name="altura" maxlength="5" height="3px" width=10px/>
    </p>

    <input class="caixa" placeholder="Informe o peso (Ex: 90.0)" value="" 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>

    <p id="paragrafo"> </p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .