Hallo zusammen,
ich arbeite mich gerade in Funktionen ein und stoße auf das folgende Problem. Ich möchte eine Kalkulation des Öfteren verwenden, was mit der nachfolgenden Funktion und dem Event onchange auch schon gut funktioniert. Allerdings glaube ich, dass es hier eine elegantere Methode gibt (bin noch JS-Anfänger, kein jQuery, ...), wie man dies schreiben könnte.
Zudem würde ich die Funktion gerne auch schon im body als onload ergänzen, allerdings würde dies nur funktionieren, wenn ich sowohl Kalkulation 1 + Kalkulation 2 (class) eintippe. Geht doch bestimmt auch einfach, richtig?
Vielleicht hat hier jemand Tipps für mich, vielen Dank auf jeden Fall schon mal
Viele Grüße
Markus
ich arbeite mich gerade in Funktionen ein und stoße auf das folgende Problem. Ich möchte eine Kalkulation des Öfteren verwenden, was mit der nachfolgenden Funktion und dem Event onchange auch schon gut funktioniert. Allerdings glaube ich, dass es hier eine elegantere Methode gibt (bin noch JS-Anfänger, kein jQuery, ...), wie man dies schreiben könnte.
Zudem würde ich die Funktion gerne auch schon im body als onload ergänzen, allerdings würde dies nur funktionieren, wenn ich sowohl Kalkulation 1 + Kalkulation 2 (class) eintippe. Geht doch bestimmt auch einfach, richtig?
Vielleicht hat hier jemand Tipps für mich, vielen Dank auf jeden Fall schon mal
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<style>
.calculation {
margin-bottom: 10px;
}
.wrapper {
display: inline;
}
.field {
width: 50px;
background-color: wheat;
}
</style>
</head>
<body onload="">
<div class="calculation1">
<div class="wrapper">
<input class="field" type="number" id="factor1a" value="2" onchange="myCalculation(parseFloat(document.getElementById('factor1a').value), parseFloat(document.getElementById('factor1b').value), result1c)">
</div>
<div class="wrapper">
<input class="field" type="number" id="factor1b" value="3" onchange="myCalculation(parseFloat(document.getElementById('factor1a').value), parseFloat(document.getElementById('factor1b').value), result1c)">
</div>
<div class="wrapper">
<span class="field" id="result1c"></span>
</div>
</div>
<div class="calculation2">
<div class="wrapper">
<input class="field" type="number" id="factor2a" value="4" onchange="myCalculation(parseFloat(document.getElementById('factor2a').value), parseFloat(document.getElementById('factor2b').value), result2c)">
</div>
<div class="wrapper">
<input class="field" type="number" id="factor2b" value="5" onchange="myCalculation(parseFloat(document.getElementById('factor2a').value), parseFloat(document.getElementById('factor2b').value), result2c)">
</div>
<div class="wrapper">
<span class="field" id="result2c"></span>
</div>
</div>
</body>
<script>
function myCalculation(fac1, fac2, res3) {
var sum = fac1 + fac2;
res3.innerHTML = sum;
}
</script>
</html>
Viele Grüße
Markus
Zuletzt bearbeitet von einem Moderator: