Kalkulator BMI

Question

Cześć,

Mam problem z kalkulatorem BMI.

Po wpisaniu w inputy np: weight:30; height:180 wyświetla mi się "Obesity" 

function bmiCalculator() {
    const height = document.getElementById('height-input').value;
    const weight = document.getElementById('weight-input').value;
    const result = document.getElementById('result');

    let BMI = weight / Math.pow(height, 2);

    if (BMI < 18) {
        result.innerHTML = 'Underweight';
    }
    if (BMI >= 18.5 && BMI < 24.9) {
        result.innerHTML = 'Normal weight';
    }
    if (BMI >= 25 && BMI < 29.9) {
        result.innerHTML = 'Overweight';
    }
    else {
        result.innerHTML = 'Obesity';
    }
};

 

......
<form>
        <div class="box">
        <div>   
            <label for="height">Height</label>
            <input type="number" name="height" id="height-input" required>
        </div>

        <div>
            <label for="weight">Weight</label>
            <input type="number" name="Weight" id="weight-input" required>
        </div>
        
        <input type="button" value="Click" id="btn" onclick="bmiCalculator()">
        <p id="result"></p>
        <p id="comment"></p>
    </div>
    </form>
.....

 

Answer 1

Do wzoru na BMI podstawia się wzrost w metrach, a nie w centymetrach. Powinieneś więc najpierw podzielić wartość wzrostu wpisaną przez użytkownika przez 100 (żeby z przykładowych 180 zrobić 1.80). Dodatkowo, dobrze jest wartości odczytane z inputów parsować na liczbę, żeby przy obliczeniach nie operować na typie string.

Answer 2

Do tego co już napisał @ScriptyChris, to problem masz też z if-ami, w tej konstrukcji co podałeś

    if (BMI < 18) {
        result.innerHTML = 'Underweight';
    }
    if (BMI >= 18.5 && BMI < 24.9) {
        result.innerHTML = 'Normal weight';
    }
    if (BMI >= 25 && BMI < 29.9) {
        result.innerHTML = 'Overweight';
    }
    else {
        result.innerHTML = 'Obesity';
    }

dodam linie puste pomiędzy poszczególnymi blokami if, dla lepszego zrozumienia.

    if (BMI < 18) {
        result.innerHTML = 'Underweight';
    }

    if (BMI >= 18.5 && BMI < 24.9) {
        result.innerHTML = 'Normal weight';
    }

    if (BMI >= 25 && BMI < 29.9) {
        result.innerHTML = 'Overweight';
    }
    else {
        result.innerHTML = 'Obesity';
    }

w takim zapisie to ostatni if "podejmuje ostateczną decyzję", nawet gdy BMI jest prawidło obliczony, ale jest mniejszy od 25 to i tak pojawi się komunikat "Obesity". Rozwiązaniem jest utworzenie z tych if-ów jednego bloku logicznego.

    if (BMI < 18) {
        result.innerHTML = 'Underweight';
    } else if (BMI >= 18.5 && BMI < 24.9) {
        result.innerHTML = 'Normal weight';
    } else if (BMI >= 25 && BMI < 29.9) {
        result.innerHTML = 'Overweight';
    } else {
        result.innerHTML = 'Obesity';
    }

 

Druga sprawa dodaj znak równości do wszystkich liczb określających zakresy BMI, bo np. ten zapis

if (BMI < 18) {
        result.innerHTML = 'Underweight';
    }  if (BMI >= 18.5 && BMI < 24.9) {

wyklucza liczbę 18, spróbuj

 const BMI = 18;

  if (BMI < 18) {
    result.innerHTML = 'Underweight';
  } else if (BMI >= 18.5 && BMI < 24.9) {
    result.innerHTML = 'Normal weight';
  } else if (BMI >= 25 && BMI < 29.9) {
    result.innerHTML = 'Overweight';
  } else {
    result.innerHTML = 'Obesity';
  }

prawidłowy zapis

 const BMI = 18;

  if (BMI <= 18) {
    result.innerHTML = 'Underweight';
  } else if (BMI >= 18.5 && BMI <= 24.9) {
    result.innerHTML = 'Normal weight';
  } else if (BMI >= 25 && BMI <= 29.9) {
    result.innerHTML = 'Overweight';
  } else {
    result.innerHTML = 'Obesity';
  }

 

Trzecia sprawa jeżeli tylko przypisujesz tekst do elementu html, lepszą praktyką jest używanie element.textContent

 

@ScriptyChris, napisał

 

Dodatkowo, dobrze jest wartości odczytane z inputów parsować na liczbę, żeby przy obliczeniach nie operować na typie string.

chciałbym uzupełnić tą wypowiedź o przykład, który może ułatwi lepsze zrozumienie.

  const height = document.getElementById('height-input').value;
  const height_parsed = Number.parseFloat(document.getElementById('height-input').value);

  console.log(height, height_parsed);

już po obrazku poniżej widać różnicę jak js traktuje wartość pobraną bezpośrednio z input-a, a wartość, która dodatkowo został poddana procesowi (w tym przypadku) Number.parseFloat. 

 

 

P.S. Przy dużej ilości else if można pokusić się o użycie switch-a, ponieważ switch bezpośrednio nie obsługuje zakresów (jak w Twoim przypadku) można zastosować taki trik.