Beispiel 3 Angabe


Erweitern Sie den BMI Rechner aus Beispiel 2 um folgende Punkte
  • Es soll eine weitere Textbox für die Eingabe des Alter geben
  • Es soll eine weitere Textbox für die Ausgabe des BMI geben
  • Der Button "berechne BMI" soll entfernt werden
  • Die Berechnung des BMI soll bei Änderung einer den Eingabe Textboxen angestoßen werden, und zwar auf das jeweilige "onkeyup" Ereignis
  • Unter den Textboxen sollen zwei Zeilen Text stehen. Die erste Zeile gibt den BMI an, und zwar durch die Ausgabe "Der BMI beträgt: " + [BMI]. Die zweite Zeile enthält entweder den Text "Das Gewicht ist im grünen Bereich.", "Sie haben Übergewicht" oder "Sie sind untergewichtig", abhängig von folgender Tabelle, die für die jeweiligen Altersgruppen den Normal-BMI angibt.

Alter
BMI
19-24 Jahre
19-24
25-34 Jahre
20-25
35-44 Jahre
21-26
45-54 Jahre
22-27
55-64 Jahre
23-28
>64 Jahre
24-29
(Quelle: https://www.uni-hohenheim.de/wwwin140/info/interaktives/bmi.htm) 


VIEL ERFOLG!

 

 

LÖSUNG:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="beispiel-3-loesung.js">
</script>
</head>
<body>
<table>
<tr>
<td>
<label>Korpergröße in cm</label>
</td>
<td>
<input type="text" onkeyup="berechneBMI()" id="groesse" value="180" style="text-align:right"/>
</td>
</tr>
<tr>
<td>
<label>Körgergewicht in kg</label>
</td>
<td>
<input type="text" onkeyup="berechneBMI()" id="gewicht" value="80" style="text-align:right"/>
</td>
</tr>
<tr>
<td>
<label>Alter</label>
</td>
<td>
<input type="text" onkeyup="berechneBMI()" id="alter" value="25" style="text-align:right"/>
</td>
</tr>
</table>
<br/>
<label id="zeile1"></label>
<br/>
<label id="zeile2"></label>

<script type="text/javascript">
berechneBMI();
</script>

</body>

</html>

JS:

function berechneBMI()
{
var groesse = document.getElementById("groesse").value / 100;
var gewicht = document.getElementById("gewicht").value;
var alter = document.getElementById("alter").value;
var bmi = gewicht / (groesse * groesse);
var bmiGanzzahl = Math.round(bmi);
var bmiKomma = Math.round((Math.abs(bmi - bmiGanzzahl))*10);

document.getElementById("zeile1").innerHTML = 'Ihr BMI beträgt ' + bmiGanzzahl + ',' + bmiKomma + '.'
document.getElementById("zeile2").innerHTML = alter;

if ((alter >= 19 && alter < 25 && bmi >= 19 && bmi <= 24) ||
(alter >= 25 && alter < 35 && bmi >= 20 && bmi <= 25) ||
(alter >= 35 && alter < 45 && bmi >= 21 && bmi <= 26) ||
(alter >= 45 && alter < 55 && bmi >= 22 && bmi <= 27) ||
(alter >= 55 && alter < 65 && bmi >= 23 && bmi <= 28) ||
(alter >= 65 && bmi >= 24 && bmi <= 29))
{
document.getElementById("zeile2").innerHTML = 'Das Gewicht ist im grünen Bereich.';
}

if ((alter >= 19 && alter < 25 && bmi < 19) ||
(alter >= 25 && alter < 35 && bmi < 20) ||
(alter >= 35 && alter < 45 && bmi < 21) ||
(alter >= 45 && alter < 55 && bmi < 22) ||
(alter >= 55 && alter < 65 && bmi < 23) ||
(alter >= 65 && bmi < 29))
{
document.getElementById("zeile2").innerHTML = 'Sie sind untergewichtig.';
}

if ((alter >= 19 && alter < 25 && bmi > 24) ||
(alter >= 25 && alter < 35 && bmi > 25) ||
(alter >= 35 && alter < 45 && bmi > 26) ||
(alter >= 45 && alter < 55 && bmi > 27) ||
(alter >= 55 && alter < 65 && bmi > 28) ||
(alter >= 65 && bmi > 29))
{
document.getElementById("zeile2").innerHTML = 'Sie haben Übergewicht.';
}

}