(() => { const form = document.querySelector('form[name=bmi]'); const getHealthMessage = unit => { let healthMessage; if (unit < 18.5) { healthMessage = 'considered underweight'; } else if (unit > 18.5 && unit < 25) { healthMessage = 'a healthy weight'; } else if (unit > 25) { healthMessage = 'considered overweight'; } return healthMessage; }; const getBMI = (weight, height) => { let newWeight = parseInt(weight, 10); let newHeight = parseInt(height, 10); return (newWeight / (newHeight /100 * newHeight / 100)).toFixed(1); }; const onSubmit = event => { event.preventDefault(); const result = form.querySelector('.result'); const health = form.querySelector('.health'); const weight = form.querySelector('input[name=weight]').value; const height = form.querySelector('input[name=height]').value; const bmi = getBMI(weight, height); result.innerHTML = bmi; health.innerHTML = getHealthMessage(bmi); }; form.addEventListener('submit', onSubmit, false); })();
<form name="bmi"> <h1>BMI Calculator</h1> <label> <input type="text" name="weight" placeholder="Weight (kg)"> </label> <label> <input type="text" name="height" placeholder="Height (cm)"> </label> <button type="submit"> Calculate BMI </button> <div class="calculation"> <div> BMI calculation: <span class="result"></span> </div> <div> This means you are: <span class="health"></span> </div> </div> </form>