+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Preis Tabellen (/showthread.php?tid=1879)
Preis Tabellen - tebn - 24.11.2022
Hallo,
ich habe für meine Website eine Tabelle über Preise und Leistungen erstellt. Jetzt möchte ich mir den gesamtpreis mit JavaScript ausrechnen lassen wenn die jeweilige Leistung durch eine Checkbox angeklickt wurde.
Bsp:
Motor 50€ "checkbox"
Getriebe 10€ "checkbox"
Glass 5€ "checkbox"
Tasche 10€ "checkbox"
Jetzt soll man durch Checkboxen zum Beispiel nur Motor und Glass anklicken können und der Preis von 55€ soll im einen Feld erscheinen.
Ich habe schon geschafft das JavaScript die zahlen ausliest, jedoch fehlt mir der Ansatz für die Funktion mit der Verlinkung zu den einzelnen checkboxen.
Kann mir jemand weiterhelfen ?
RE: Preis Tabellen - admin - 25.11.2022
sowas in der Art hatte ich schon mal im anderen Forum.
Ist etwas größer , aber das kannst du dir ja sicherlich selber anpassen wie du es brauchst, oder ?
https://basti1012.bplaced.net/index.php?ordner=html&id=179
RE: Preis Tabellen - admin - 25.11.2022
Habe noch anderes Beispiel gefunden, was deiner Vorstellung näher kommt
https://basti1012.bplaced.net/index.php?ordner=javascriptforum&id=817
RE: Preis Tabellen - rzscout - 25.11.2022
Hi tebn,
du bekommst natürlich auch eine Version von mir. Meines Erachtens solltest du einen anderen weg gehen und lieber Varaiblen nehmen zum zusammenrechnen anstatt Elemente.
Hier meine Version:
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">
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Preise</title>
<script>
// Deklaration von Variablen um von überall darauf zugreifen zu können
var motor, rest, lack, summe, gesamt = 0;
//Führt den Skript aus, wenn der DOM geladen wurde.
document.addEventListener('DOMContentLoaded', function() {
//Weist Variablen zu
motor = document.getElementById('motor'); rest = document.getElementById('rest');
lack = document.getElementById('lack'); summe = document.getElementById('summe');
motor.addEventListener('change', berechne1);
rest.addEventListener('change', berechne2);
lack.addEventListener('change', berechne3);
});
function berechne1() {
if(motor.checked == true) {
gesamt = gesamt + 50;
} else {
gesamt = gesamt - 50;
}
printErgebnis();
}
function berechne2() {
if(rest.checked == true) {
gesamt = gesamt + 50;
} else {
gesamt = gesamt - 50;
}
printErgebnis();
}
function berechne3() {
if(lack.checked == true) {
gesamt = gesamt + 50;
} else {
gesamt = gesamt - 50;
}
printErgebnis();
}
function printErgebnis() {
summe.value = gesamt;
}
</script>
</head>
<body>
<nav>
<ul class="mitte">
<li><a href="index.html">Home</a></li>
<li><a href="preise.html">Preise</a></li>
<li><a href="treffen.html">Treffen</a></li>
<li><a>Service</a>
<ul>
<li><a href="restaurierung.html">Restaurierung/Instandetzubg</a></li>
<li><a href="motorinstandsetzung.html">Motorregeneration</a></li>
</ul>
</li>
<li><a href="/">Metallgestaltung</a></li>
</ul>
</nav>
<div > <h2>Arbeitskosten</h2>
<table id="rechnung">
<tr>
<th>Leistungen</th>
<th> Preis</th>
<th>Preis</th>
<th>Preis</th>
</tr>
<tr>
<td>Motorinstandsetzung</td>
<td id="addition1">5</td>
<td></td>
<td></td>
<td><input type="checkbox" id="motor"></td>
</tr>
<tr>
<td>Komplette restaurierung </td>
<td id="addition3">7</td>
<td></td>
<td></td>
<td><input type="checkbox" id="rest"></td>
</tr>
<tr>
<td>Lackierung/Ovatrol-Behandlung</td>
<td id="addition4">7</td>
<td></td>
<td></td>
<td><input type="checkbox" id="lack"></td>
</tr>
</table>
<output id="summe"></output>
</body>
</html>Viel Erfolg
rzscout