Beispiel:Währungsumrechner.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Währungsumrechner</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style> .umrechner { border: thin dotted #888; border-radius: 0.3em; display: inline-block; padding: 0 1em 1em; margin: 0 1em 1em 0; }
.umrechner h2 { text-align: center; }
.umrechner label { display: block; }
.umrechner label input { display: block; } </style> <script> document.addEventListener("DOMContentLoaded", function () {
Array.prototype.slice.call( document.querySelectorAll(".umrechner") ).forEach(function (article) { const rate = article.querySelector('[name="rate"]'); const a = article.querySelector('[name="a"]'); const b = article.querySelector('[name="b"]');
function umrechnen (event) { var r = parseFloat(rate.value);
if (r !== 0) {
switch (event.target || event.srcElement) {
case a: case rate: b.value = (parseFloat(a.value) * r).toFixed(2); break;
case b: a.value = (parseFloat(b.value) / r).toFixed(2); break; } } }
article.addEventListener('input', umrechnen); }); }); </script> </head> <body>
Währungsumrechner
<article class="umrechner">
Euro und Dollar
<label> Wechselkurs Euro → Dollar <input name="rate" type="number" step="0.01" value="1.11" /> </label> <label> Betrag in Euro <input name="a" type="number" step="0.01" /> </label> <label> Betrag in US-Dollar <input name="b" type="number" step="0.01" /> </label> </article>
<article class="umrechner">
Euro und Renminbi
<label> Wechselkurs Euro → Renminbi <input name="rate" type="number" step="0.01" value="7.75" /> </label> <label> Betrag in Euro <input name="a" type="number" step="0.01" /> </label> <label> Betrag in Renminbi <input name="b" type="number" step="0.01" /> </label> </article> </body> </html>
