JSFiddle - React, Tailwind, and code Playground

HTML

<form name="bmi">
  <h1>Mål dit BMI:</h1>
  <label>
    <input type="text" name="weight" id="weight" placeholder="Vægt (kg)">
    <input type="text" name="height" id="height" placeholder="Højde (cm)">
    <input type="submit" name="submit" id="submit" value="Udregn BMI">
  </label>
  <div class="calculation">
    <div>
      Dit BMI er: <span class="result"></span>
    </div>
    <div>
      Dette betyder at du er: <span class="health"></span>
    </div>
  </div>
</form>

JavaScript

const form = document.querySelector('form[name=bmi]');  
   const onSubmit = function(event) {
  	
    event.preventDefault();
    let healthMessage;
    
    const result = form.querySelector('.result');
    const health = form.querySelector('.health');
    
    const WEIRD_MAGIC_NUMBER_1 = 18.5 
    const WEIRD_MAGIC_NUMBER_2 = 25
  
    const weight = Number(form.querySelector('input[name=weight]').value);
    const height = Number(form.querySelector('input[name=height]').value);    
    const bmi = (weight / (height /100 * height / 100)).toFixed(1);
    
    if (bmi < 18.5) {
      healthMessage = 'undervægtig';
    } else if (bmi > WEIRD_MAGIC_NUMBER_1 && bmi < WEIRD_MAGIC_NUMBER_2) {
      healthMessage = 'normal vægtig';
    } else if (bmi > WEIRD_MAGIC_NUMBER_2) {
      healthMessage = 'overvægtig';
    }
    result.innerHTML = bmi;
    health.innerHTML = healthMessage;
  };  
  form.addEventListener('submit', onSubmit, false);