1
resposta

Tentando fazer uma Calculadora de IMC, mas retorna "Not a Number"

Olá! Meu objetivo: fazer uma calculadora IMC. Para isso, recebo o valor de "peso" e de "altura". executo o calculo e deveria retornar um console.log com o valor do IMC. O PROBLEMA: o retorno do console.log está NaN.

Não sei o que está faltando no meu código. Preciso de Ajuda.

var btn = document.querySelector('.btn');
btn.addEventListener('click', pegaValores)  

function pegaValores(){
    var altura = document.getElementsByClassName('.inputAltura').value;
    var peso = document.getElementsByClassName('inputPeso').value;

    altura = parseFloat(altura);
    peso = parseFloat(peso);

    console.log(calculaimc());

}

function calculaimc(altura,peso){
    var imc = peso / (altura * altura);
    imc = parseFloat(imc);
    return imc
}
1 resposta

Olá Lucas, como você está?

Peço desculpas pela demora em obter um retorno.

O Nan (Not a Number) está acontecendo por dois motivos:

  • É utilizado o método getElementsByClassName() para obter os valores de altura e peso. No entanto, esse método retorna uma coleção de elementos com a classe especificada, ou seja, se houver mais de um elemento com a mesma classe, o método retornará uma coleção com todos esses elementos. Para o seu caso em específico, por só haver uma classe com o elemento, é necessário acessar o primeiro elemento desta coleção usando o índice [0] (zero) antes de obter o valor.
  • Dentro da função pegaValores() ao chamar a função calculaimc() não é passado os parâmetros de altura e peso.

Sendo assim, as correções das linhas citadas ficarão da seguinte forma:

var altura = document.getElementsByClassName('inputAltura')[0].value;
var peso = document.getElementsByClassName('inputPeso')[0].value;
console.log(calculaimc(altura, peso));

Segue abaixo o código completo com as correções:

<!DOCTYPE html>
<html>
  <head>
    <title>Calculadora de IMC</title>
  </head>
  <body>
    <input type="text" class="inputAltura" placeholder="Altura" />
    <input type="text" class="inputPeso" placeholder="Peso" />
    <button class="btn">Calcular IMC</button>

    <script>
      var btn = document.querySelector(".btn");
      btn.addEventListener("click", pegaValores);

      function pegaValores() {
        var altura = document.getElementsByClassName("inputAltura")[0].value;
        var peso = document.getElementsByClassName("inputPeso")[0].value;

        altura = parseFloat(altura);
        peso = parseFloat(peso);

        console.log(calculaimc(altura, peso));
      }

      function calculaimc(altura, peso) {
        var imc = peso / (altura * altura);
        imc = parseFloat(imc);
        return imc;
      }
    </script>
  </body>
</html>

Espero ter ajudado. Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!