• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kalkulator BMI

VPS Starter Arubacloud
+1 głos
2,462 wizyt
pytanie zadane 25 września 2021 w JavaScript przez void6 Użytkownik (790 p.)

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

 

2 odpowiedzi

+3 głosów
odpowiedź 25 września 2021 przez ScriptyChris Mędrzec (190,190 p.)

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.

0 głosów
odpowiedź 26 września 2021 przez VBService Ekspert (255,440 p.)
edycja 26 września 2021 przez VBService

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.

Podobne pytania

+1 głos
1 odpowiedź 633 wizyt
pytanie zadane 28 grudnia 2020 w C# przez Tukan Nowicjusz (190 p.)
0 głosów
2 odpowiedzi 1,373 wizyt
pytanie zadane 26 marca 2021 w Java przez Paluch22 Nowicjusz (230 p.)
0 głosów
2 odpowiedzi 434 wizyt
pytanie zadane 29 października 2018 w C i C++ przez Shimeo7 Obywatel (1,910 p.)

92,843 zapytań

141,782 odpowiedzi

320,858 komentarzy

62,174 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...