basti1012.bplaced.net

Hallo! Ich soll eine Seite erstellen. Auf dieser sollen Kilometer in Meilen umgewandelt werden. Also ganz simpel: Man gibt eine Zahl an (hier: Kilometer), klickt auf los und dann soll eben das Ergebnis (Meilen) erscheinen. Das soll mithilfe von Javascript geschehen. Javascript soll nicht in mein HTML Dokument eingebettet werden. Ich bräuchte also nur eine Erklärung für das externe und reine Javascript-Dokument. Ich hab mich auch schon im Forum umgesehen und finde meist nur Anleitungen für Umrechnungen, die eben eingebettet sind. Ich bin blutiger Anfänger & freue mich über jeden Ratschlag!!! <h1>Lösung von @arne </h1>

Code

                                    
                                <style>
  body { font-family:Tahoma; color:#666; }
.calculator { display:inline-block; margin:10px; padding:15px; background:#fafafa; border:5px solid #eee; border-radius:5px;}
.calculator H1 { line-height:0.5em; }
.calculator H1 > SMALL { display:inline-block; padding-left:3px; font-size:0.5em; font-weight:normal; color:#999; }
.calculator > SPAN, INPUT { font-size:1.5em; }
.calculator INPUT { width:250px; color:#66c; }
.calculator .separator { display:inline-block; padding:0 5px; }
  
</style>
<span class="calculator">
<h1>Umrechnung<br><small>Kilometer : Meile</small></h1>
<input type="text" id="km" placeholder="Kilometer">
<span class="separator">&laquo;&nbsp;&raquo;</span>
<input type="text" id="ml" placeholder="Meilen">
</span>
<script>
  var _scale = 0.621371;
var _inputs = [
    document.querySelector('#km'),
    document.querySelector('#ml')
  ];

_inputs.forEach( i => {
    i.addEventListener('change', function(e) {
      _idx = (i.id == 'km') ? 1 : 0;
      _multi = (i.id == 'km') ? _scale : 1/_scale;
      _inputs[_idx].value = parseFloat(i.value) * _multi;
    });
  });
</script>