Automatic IMC calculation in INPUT

Asked

Viewed 618 times

-4

I’m having trouble with this code, when I perform it gives a wrong result and I can not limit decimal.

function calcular() {
  var peso = parseInt(document.getElementById('peso').value);
  var alt = parseInt(document.getElementById('alt').value);
  document.getElementById('imc').innerHTML = peso / Math.pow(alt, 2);
}			
 <form action="#" method="post" enctype="multipart/form-data">
  <div class="form-row">
 	   <div class="form-group col-md-3">
    <label for="inputPeso"> <h6><strong>Peso</strong></h6> </label>
    <input type="text" class="form-control" id="peso" name="peso" placeholder="Insira Peso (kg)" onfocus="calcular()">
  </div>
  
  <div class="form-group col-md-3">
    <label for="inputAddress2"><h6><strong>Altura</strong></h6></label>
    <input type="text" class="form-control" id="alt" name="alt" placeholder="Insira Altura (m)" onblur="calcular()">
  </div>
  
  <div class="form-group col-md-3">
    <label for="inputAddress2"><h6><strong>IMC</strong></h6></label>
	  <div type="text" class="form-control" id="imc" name="imc"></div>
  </div>
</div> 
</form>

2 answers

1


Basically I made some corrections to your code mainly in Javascript.

In your html I just changed the onfocus and onblur to onkeyup because from what I understand and analysis by code you want each number that the user enters to be made the calculation of the imc and for that is necessary the onkeyup and also changed the type of input to number.

The Javascript code below is all commented and the HTML has the changes.

Javascript

/**
* Sugestao(oes):
*  - Verificar se o usuario digitou a altura
*    realmente em metros.
*/

function calcular() {
  // Pega o valor do peso.
  var peso = document.getElementById('peso').value;

  // Verifica se o simbolo de casas decimais e
  // o do Brasil.
  if (peso.indexOf(",") > -1) {
    // Se sim ,corrige para o padrao americano
    // e programavel.
    peso.replace("," ,".");

  // Verifica se o valor de 'peso' nao esta vasio.
  } else if (!(peso)) {
    // Se sim ,define para o valor para 1.
    peso = 1;
  }

  // Converte 'peso' para numero decimal.
  peso = parseFloat(peso);

  // Verifica se 'peso' e igual a zero.
  if (peso == 0) {
    // Se sim ,define 'peso' como 1.
    peso = 1;
  }

  // Pega o valor da altura.
  var alt = document.getElementById('alt').value;

  // Verifica se o simbolo de casas decimais e
  // o do Brasil.
  if (alt.indexOf(",") > -1) {
    // Se sim ,corrige para o padrao americano
    // e programavel.
    alt.replace("," ,".");

  // Verifica se o valor de 'alt' nao esta
  // vasio.
  } else if (!(alt)) {
    // Se sim ,define para o valor para 1.
    alt = 1;
  }

  // Converte 'alt' para numero decimal.
  alt = parseFloat(alt);

  // Verifica se 'alt' e igual a zero.
  if (alt == 0) {
    // Se sim ,define 'alt' como 1.
    alt = 1;
  }

  // Cacula e exibe o imc ao usuario.
  document.getElementById('imc').innerHTML = (peso / Math.pow(alt, 2)).toFixed(2);
}

HTML - Form

<!-- Mudancas
  Substituicao dos eventos 'onfocus' e 'onblur' pelo evento 'onkeyup'.
  Substituicao do typo de entra de 'text' para 'number'
-->

<form action="#" method="post" enctype="multipart/form-data">
  <div class="form-row">
    <div class="form-group col-md-3">
      <label for="inputPeso"> <h6><strong>Peso</strong></h6> </label>
      <input type="number" class="form-control" id="peso" name="peso" placeholder="Insira Peso (kg)" onkeyup="calcular()">
    </div>

    <div class="form-group col-md-3">
      <label for="inputAddress2"><h6><strong>Altura</strong></h6></label>
      <input type="number" class="form-control" id="alt" name="alt" placeholder="Insira Altura (m)" onkeyup="calcular()">
    </div>

    <div class="form-group col-md-3">
      <label for="inputAddress2"><h6><strong>IMC</strong></h6></label>
      <div type="text" class="form-control" id="imc" name="imc"></div>
    </div>
  </div> 
</form>
  • 1

    Thank you very much, it worked perfectly...... thanks even friend!!

  • A lot for nothing.

0

Just do (remove the parseint)

 function calcular() {
  var peso = 68.00;
  var alt = 1.0; 
  var imc = parseFloat( peso / Math.pow(alt, 2)).toFixed(2);


  alert(imc)


} 

calcular();

Browser other questions tagged

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