Hallo,
ich bin dabei den Warenkorb zu einer Reiseseite zu gestalten und habe hierfür bereits eine Tabelle erstellt. In dieser Tabelle tauchen der Artikel (die Reise), die Personenanzahl, Kinderanzahl, sowie Einzelpreis und Gesamtpreis auf. Mittels + und - Buttons kann die Personen- bzw. Kinderanzahl verändert werden. Dabei werden per "onclick" Funktionen ausgeführt, die die Gesamtpreise berechnen, sowie auch die Summe des Warenkorbs. Mich stört nun, dass ich für jede Artikelzeile jeweils immer die gleichen Funktionen schreiben muss. Ich hätte z.B. gerne eine + Funktion, der die richtigen Parameter übergeben werden, anstatt in jeder Funktion immer nur mit document.getElementByID zu arbeiten. Aber seht selbst.
Folgendes ist ein JS-Auszug. Diese Funktionen ändern die Personenanzahl und errechnen den Gesamtbetrag. Summe() errechnet die Summenpreis des Warenkorbs.
<script>
function abwählen(Preis) {
var x = document.getElementById('Person').value;
x = x - 1;
if (1 > x) {
x = x + 1;
}
document.getElementById('Person').value = x;
var Kind = document.getElementById('Kind').value;
var GPI = Kind * (Preis / 100 * 35);
var GPII = (x - Kind) * Preis;
Preis = GPI + GPII;
Preis = Preis.toFixed(2);
document.getElementById('Gesamtpreis').value = Preis;
Summe();
}
function zuwählen() {
var x = document.getElementById('Person').value;
x = parseFloat(x) + 1;
if (x > 10) {
x = x - 1;
}
document.getElementById('Person').value = x;
var Kind = document.getElementById('Kind').value;
var Preis = document.getElementById('Einzelpreis').value;
var GPI = Kind * (Preis / 100 * 35);
var GPII = (x - Kind) * Preis;
Preis = GPI + GPII;
Preis = Preis.toFixed(2);
document.getElementById('Gesamtpreis').value = Preis;
Summe();
}
</script>Dies ist ein Ausschnitt aus der Tabelle. (Eine Tabellenzeile)
<tr id="zeile1">
<form name="Formular" action="" >
<td><input type="text" id="Artikel" size="20"></td>
<td><input type="button" value="-" onclick="abwählen(23.95)">
<input type="text" id="Person" size="2" disabled="" value="1" />
<input type="button" value="+" onclick="zuwählen()"></td>
<td><input type="button" value="-" onclick="minusKind()">
<input type="text" id="Kind" size="2" disabled="" value="0"/>
<input type="button" value="+" onclick="plusKind()"></td>
<td><input type="text" id="Einzelpreis" disabled="disabled" value="23.95" size="5"></td>
<td><input type="text" id="Gesamtpreis" disabled="disabled" value="23.95" size="5"></td>
<td><a href="javascript:blend_out('zeile1')"><input type="button" value="X" onclick="reset1()"></a></td>
</form>
</tr>Der Code funktioniert wie er soll. Aber für jede weitere Zeile, müsste ich beispielsweise die abwählen-Funktion erneut schreiben und dann abwählen1, abwählen2... nennen. Wie kann ich der Funktion die Parameter Kind, Person, Gesamtpreis übergeben, sodass ich die abwählen-Methode nur einmal schreiben muss? Das Problem ist hierbei, dass sich die Werte für Kind oder Person jedes Mal ändern, sodass ich nicht einfach abwählen(2.35, 4, 6) schreiben kann.
Und ich bin sicher, dass ich den Code etwas kompliziert geschrieben habe. Für generelle Vereinfachungen oder Verbesserungen bin ich auch dankbar.
Die funktioniert. Da brauchen wir nix dran machen.