Hallo!
Ich sollte für die Schule einen BMI-Rechner Programmieren. Ich war leider krank und hatte die Aufgabenstellung nicht mitbekommen, darum hatte ich mit viel Hilfe einen erstellt. Dieser ist nun nicht ganz richtig, da ich mich nach zwei Tabellen richten soll. Kann mir jemand helfen das dementsprechend umzugestalten?
HTML und JS folgen, sowie Tabelle
Code
<head>
<script type="text/javascript" src="js/function.js" defer></script>
<meta charset="UTF-8">
<title>BMI-Rechner</title>
<meta name="BMI-Rechner" content="Body-Mass-Index Gewichtsberechnung">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>BMI-Rechner</h3>
<form class="form" id="form" onsubmit="return validateForm()">
<div class="row-one">
<input type="text" class="text-input" id="age" autocomplete="off" required/><p class="text">Alter</p>
<label class="container">
<input type="radio" name="radio" id="f"><p class="text">Frau</p>
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="radio" id="m"><p class="text">Mann</p>
<span class="checkmark"></span>
</label>
</div>
<div class="row-two">
<input type="text" class="text-input" id="height" autocomplete="off" required><p class="text">Höhe (cm)</p>
<input type="text" class="text-input" id="weight" autocomplete="off" required><p class="text">Gewicht (kg)</p>
</div>
<button type="button" id="submit">Absenden</button>
</form>
</body>Code
var age = document.getElementById("age");
var height = document.getElementById("height");
var weight = document.getElementById("weight");
var male = document.getElementById("m");
var female = document.getElementById("f");
var form = document.getElementById("form");
function validateForm(){
if(age.value=='' || height.value=='' || weight.value=='' || (male.checked==false && female.checked==false)){
alert("Alle Felder müssen ausgefüllt werden!");
document.getElementById("submit").removeEventListener("click", countBmi);
}else{
countBmi();
}
}
document.getElementById("submit").addEventListener("click", validateForm, true);
function countBmi(){
var p = [age.value, height.value, weight.value];
if(male.checked){
p.push("male");
}else if(female.checked){
p.push("female");
}
form.reset();
var bmi = Number(p[2])/(Number(p[1])/100*Number(p[1])/100);
var result = '';
if(bmi<18.5){
result = 'Untergewicht';
}else if(18.5<=bmi&&bmi<=24.9){
result = 'Normalgewicht';
}else if(25<=bmi&&bmi<=29.9){
result = 'Leichtes Übergewicht';
}else if(30<=bmi&&bmi<=34.9){
result = 'Übergewicht';
}else if(35<=bmi){
result = 'Extremes Übergewicht';
}
var h1 = document.createElement("h1");
var h2 = document.createElement("h2");
var t = document.createTextNode(result);
var b = document.createTextNode('BMI: ');
var r = document.createTextNode(parseFloat(bmi).toFixed(2));
h1.appendChild(t);
h2.appendChild(b);
h2.appendChild(r);
document.body.appendChild(h1);
document.body.appendChild(h2);
document.getElementById("submit").removeEventListener("click", countBmi);
document.getElementById("submit").removeEventListener("click", validateForm);
}
document.getElementById("submit").addEventListener("click", countBmi);