Information Technology Reference
In-Depth Information
Der Code für das Beispiel ist schnell erklärt: Um bei jeder Änderung der Stück-
zahl die
output
-Elemente zu aktualisieren, verwenden wir das
oninput
-Event
des Formulars:
<form
oninput="updateSum();"
>
<table>
<tr><th>Produkt<th>Preis (
)<th>Stückzahl
<tr><td>Tastatur<td class=num id=i1Price>29.90<td>
<input name=i1 id=i1 type=number min=0 value=0 max=99>
<tr><td>Maus<td class=num id=i2Price>19.90<td>
€
Die
output
-Elemente sind im Anschluss an die Tabelle mit den Produkten defi-
niert und verweisen über das
for
-Attribut auf die IDs der
input
-Felder:
<p>Sie haben <output name=sumProd
for="i1 i2 i3"
id=sumProd></output> Produkte im Einkaufswagen und
müssen <output name=sum for="i1 i2 i3" id=sum></output>
bezahlen.
€
Im JavaScript-Code läuft eine Schleife über alle
input
-Elemente. Sie zählt die
Stückzahlen zusammen und errechnet den Gesamtpreis.
function updateSum() {
var ips = document.getElementsByTagName("input");
var sum = 0;
var prods = 0;
for (var i=0; i<ips.length; i++) {
var cnt=Number(ips[i].value);
if (cnt > 0) {
sum += cnt * Number(document.getElementById(
ips[i].name+"Price").innerHTML);
prods += cnt;
}
}
document.getElementById("sumProd").value = prods;
document.getElementById("sum").value = sum;
}
Den Preis des Produkts holen wir uns direkt aus der Tabelle. Dabei verwenden
wir den
innerHTML
-Wert der entsprechenden Tabellenspalte und wandeln die-
sen mit der JavaScript-Funktion
Number()
in eine Zahl um. Gleiches gilt auch
für den Wert im
input
-Feld (
ips[i].value
), denn ohne diese Umwandlung wür-
de JavaScript die Zeichenketten addieren, was nicht zu dem gewünschten Er-
gebnis führt. Abschließend werden die errechneten Werte in die
value
-Attribu-
te der
output
-Elemente eingesetzt.
