08.01.2023, 18:42
Hallo nbergmann, ich habe auch eine Version gebastelt. Hier meine Version:
Ich hoffe der erstellte Codeschnipsel und der von admin können dir weiterhelfen deinen Code besser zu verstehen.
Viele Grüße
rzscout
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rechnen</title>
<style>
html {
font-family: 'Arial', 'Helvetica', sans-serif;
}
fieldset {
display: inline-block;
width: 600px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.ausgabe-set {
display: flex;
flex-direction: column;
}
</style>
<script>
var r1, r2, r3, r4, rgesamt, zahl1, zahl2, output, btn, rechenart;
document.addEventListener('DOMContentLoaded', function() {
r1 = document.getElementById('r1'); r2 = document.getElementById('r2');
r3 = document.getElementById('r3'); r4 = document.getElementById('r4');
rgesamt = document.querySelectorAll('input[name=rechenart]');
rgesamt.forEach(function(elem){
elem.addEventListener('input', function() {
rechenart = elem.dataset.rechenart;
});
});
zahl1 = document.getElementById('zahl1'); zahl2 = document.getElementById('zahl2');
zahl1.value = ''; zahl2.value = ''; zahl1.focus();
output = document.getElementById('output'); btn = document.getElementById('btn');
r1.checked = true; rechenart = 'addition';
btn.addEventListener('click', function() {
let num1 = zahl1.value.replace(',','.');
let num2 = zahl2.value.replace(',','.');
if(!isNaN(num1) && !isNaN(num2) && num1 != '' && num2 != '') {
num1 = parseFloat(num1);
num2 = parseFloat(num2);
berechne(num1, num2);
} else {
output.value = "Fehler: Bitte richtige Zahlen eingeben!";
}
});
});
function berechne(num1, num2) {
var ergebnis = 0;
switch(rechenart) {
case 'addition':
ergebnis = num1 + num2;
output.value = ergebnis;
break;
case 'subtraktion':
ergebnis = num1 - num2;
output.value = ergebnis;
break;
case 'multiplikation':
ergebnis = num1 * num2;
output.value = ergebnis;
break;
case 'division':
ergebnis = num1 / num2;
output.value = ergebnis;
break;
}
}
</script>
</head>
<body>
<h1>Rechner</h1>
<fieldset>
<input type="radio" name="rechenart" id="r1" data-rechenart="addition">
<label for="r1">Addition</label>
<input type="radio" name="rechenart" id="r2" data-rechenart="subtraktion">
<label for="r2">Subtraktion</label>
<input type="radio" name="rechenart" id="r3" data-rechenart="multiplikation">
<label for="r3">Multiplikation</label>
<input type="radio" name="rechenart" id="r4" data-rechenart="division">
<label for="r4">Division</label>
</fieldset>
<fieldset>
<input type="number" name="zahl1" id="zahl1">
<label for="zahl1">Erste Zahl</label>
<input type="number" name="zahl2" id="zahl2">
<label for="zahl2">Zweite Zahl</label>
</fieldset>
<fieldset class="ausgabe-set">
<p>Ergebnis:</p><output id="output"></output>
<button id="btn">berechne</button>
</fieldset>
</body>
</html>Ich hoffe der erstellte Codeschnipsel und der von admin können dir weiterhelfen deinen Code besser zu verstehen.
Viele Grüße
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 