Display the result of a calculation on the screen

Asked

Viewed 153 times

1

I need to present the result of this function on the screen, I’m only using Alert to see if it’s working, but I need to display it as a paragraph on the screen. I tried using innerHTML, but I couldn’t. Follow my code:

    <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>

I also need to format the output of the calculus variable, I need it to take 2 houses after the comma. I’ve tried using toFixed(2), but it also didn’t work.

javascript html

  • Hello Bruno, I see that your form performs the refresh action. You intend to reload the page by clicking the button Calculate ?

  • Hi @RXSD, it would be better not to update

  • 1

    in this case, I made some adjustments to your html do not update the page when you click the button, so you understand how I performed the desired solution

2 answers

1


welcome to Stackoverflow!

To make it easier for you to understand, I made some changes to your source code so that your page is not reloaded, making it difficult to fill the paragraph with the text of the message. If you want to perform the action of your form and are not using any back-end programming language, just follow the steps found in that reply .

How you tried to use the methods toFixed and innerHTML, I decided to apply in your code to see how it works with these JS features.

Just run the code below, any questions and I know how to answer, I’m here to help you!

 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>

1

Some considerations:

  • do not access DOM elements by ID this way, take a look here: /a/123106/129
  • instead of if/Else you can have an array of values and iterate that array. Actually in your if/Else the value on the left (greater than...) is irrelevant since it is running sequentially as an array would also.
  • you’re using form and a button type="submit" but you’re doing calculations on JS, which means form cannot be submitted. That’s why I took the submit in my example. Since your question was how to present the result on the page.
  • your HTML has </p> plus, or lack the opening tag <p>. I corrected that in my reply.

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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.