Beispiel:Währungsumrechner.html
Aus SELFHTML-Wiki
<!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:SELFHTML-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>
<h1>Währungsumrechner</h1>
<article class="umrechner">
<h2>Euro und Dollar</h2>
<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">
<h2>Euro und Renminbi</h2>
<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>
