Neuberechnung

by Rolf

HTML

<fieldset id="paketmaß">
<legend>Bitte geben Sie hier Ihr gewünschtes Maß ein</legend>
<div>
<label><span>Breite</span><input type="number" step="0.1" id="breite"></label>
<label><span>Höhe</span><input type="number" step="0.1" id="höhe"></label>
</div>
</fieldset>

CSS

* {
  box-sizing: border-box;
}
#paketmaß {
  padding: 0.5em;
}

#paketmaß div {   /* Thanks to Chrome, display:flex on a fieldset won't work */
  display: flex;
  flex-wrap: wrap;
}

#paketmaß label {
  display: block;
  flex: 1 0 10em;
  margin: 0 0.5em;
}

#paketmaß label span {
  display: block;
}

#paketmaß input {
  width: 100%;
}

JavaScript

(function() {
   document.addEventListener("DOMContentLoaded", initialize);
   
   var eBreite, eHöhe, faktor = 1.5;
   
   function initialize() {
      eBreite = document.getElementById("breite");   
      eHöhe = document.getElementById("höhe");   
      
      document.getElementById("paketmaß").addEventListener("input", handleInputFieldChanged);
   }
   
   function handleInputFieldChanged(event) {
      if (event.target == eBreite) {
         eHöhe.value = Math.round(getFieldValue(eBreite) * faktor * 10) / 10;
      }
      else if (event.target == eHöhe) {
         eBreite.value = Math.round(getFieldValue(eHöhe) / faktor * 10) / 10;
      }
   }
   
   function getFieldValue(feld) {
      var wert = parseFloat(feld.value);
      return wert;
   }
})()