nicht angemeldet
Rechnen mit JavaScript
Hallo Ihr Lieben,
ich habe eine Darstellung einer Tabelle in HTML und möchte nun per Javascript Berechnungen durchführen. Beispielsweise die Spalten summieren und eine weitere Spalte hinzufügen mit der Summe. Hat das jemand schon einmal gemacht? Viele Grüsse
Anna
-
Hello Anna,
ich habe eine Darstellung einer Tabelle in HTML und möchte nun per Javascript Berechnungen durchführen. Beispielsweise die Spalten summieren und eine weitere Spalte hinzufügen mit der Summe.
Das erscheint mir nur sinnvoll, wenn man in der Tabelle auch Werte eingeben könnte. Das geht ja wohl nur, wenn man ein Grid aus <input>-Elementen baut, oder? Dann könnte man z.B. über getElementById auf das Element zugreifen und die Neuberechnung durchführen.
Anderenfalls wären die Werte in den Zellen ja schon bei vor Absendung der Response auf dem Server bekannt und ein Serverscript wäre besser geeignet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Texcal</title><script type="text/javascript">
<!--
function calcLine()
{
document.getElementById("z13").value =
eval(document.getElementById("z11").value) +
eval(document.getElementById("z12").value);document.getElementById("z23").value =
eval(document.getElementById("z21").value) +
eval(document.getElementById("z22").value);document.getElementById("z33").value =
eval(document.getElementById("z31").value) +
eval(document.getElementById("z32").value);
}
//-->
</script></head>
<body><form action="#">
<input type="text" size="10" name="z11" id="z11" onChange="calcLine();">
<input type="text" size="10" name="z12" id="z12" onChange="calcLine();">
<input type="text" size="10" name="z13" id="z13"><br />
<input type="text" size="10" name="z21" id="z21" onChange="calcLine();">
<input type="text" size="10" name="z22" id="z22" onChange="calcLine();">
<input type="text" size="10" name="z23" id="z23"><br />
<input type="text" size="10" name="z31" id="z31" onChange="calcLine();">
<input type="text" size="10" name="z32" id="z32" onChange="calcLine();">
<input type="text" size="10" name="z33" id="z33"><br />
</form></body>
</html>Probier es mal aus, dann wirst Du die Probleme schon erkennen. Sollte Dir dafür eine Lösung einfallen, wie man die NaN (Not assigned Number) weg bekommt, dann poste das mal bitte hier.
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Texcal</title><script type="text/javascript">
<!--
function calcLine()
{
document.getElementById("z13").value =
eval(document.getElementById("z11").value) +
eval(document.getElementById("z12").value);eval ist evil!
Es ist hier überhaupt nicht nötig und erschwert das debugging, macht das Programm langsam und kann zu Abstürzen führen.
Ich würd das Formular anders aufbauen:
<form>
<input type="text" size="10" name="a" onChange="calcLine(this.form);">
<input type="text" size="10" name="b" onChange="calcLine(this.form);">
<input type="text" size="10" name="c" ><br /><input type="text" size="10" name="a" onChange="calcLine(this.form);">
<input type="text" size="10" name="b" onChange="calcLine(this.form);">
<input type="text" size="10" name="c" ><br /></form>
function calcLine(form)
{
for(var i = 0; i < form.a.length; i++)
form.c[i].value = parseFloat(form.a[i].value) + parseFloat(form.b[i].value);
}Struppi.
-
Hello Struppi,
form.c[i].value = parseFloat(form.a[i].value) + parseFloat(form.b
Danke für den Tipp. parseFloat habe ich gesucht. In dieser Hinsicht ist Self noch nicht so auskunftsfreudig. Wenn man nicht weiß, was man sucht, findet man bei JavaScript nix.
Aber ich hatte Anna ja schon geschrieben, dass sie noch selber basteln muss.
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
-
-
-
Hallo Anna,
ich habe eine Darstellung einer Tabelle in HTML und möchte nun per Javascript Berechnungen durchführen.
Da surfe ich ich ein wenig zur Entspannung durch das Forum und finde nun deine Frage. Habe gerade für mein Haushaltsbuch mit Berechnungen unter Javascript gespielt.
Den Hinweis auf parsefloat hast du schon bekommen.
Helfen kann dir auch noch das math-objekt.
Für die Arbeit mit Zahlen für Geldbeträge sprich mit 2 Nachkommastellen und in deutscher Schreibweise mit Komma getrennt habe ich mir zwei Funktionen geschrieben, die Berechnungen leicht machen:
function PreisCheck(preis)
{
var CPreis = preis;
var XPreis = preis.replace(/,/g,".");
//alert(XPreis);
CPreis = XPreis.replace(/./g,"");
p1 = XPreis.length;
p2 = XPreis.search(/./g);
p3 = parseInt(p1) - parseInt(p2);
if (p3 == 3) { if (p2 < '0') CPreis = CPreis + '00';if (p2 < 0) alert('Warnung!\n\n Es wurde ein Einzelpreis ohne erkennbare Nachkommastellen gefunden!\n\n Gefundener Preis = ' + preis + '\n\n Die Berechnung wird fortgeführt mit der Unterstellung, der Betrag stellt\n\n eine Ganzzahl dar.\n\n Bitte kontrollieren Sie diese Preisangabe!');}
if (p3 == '0') CPreis = CPreis + '00';
if (p3 == '1') CPreis = CPreis + '00';
if (p3 == '2') CPreis = CPreis + '0';
if (p3 > 3) alert('Fehler!\n\n Es wurde ein Einzelpreis mit mehr als zwei Nachkommstellen gefunden!\n\n Gefundener Preis = ' + preis + '\n\n Bitte korrigieren Sie die Rechnungspositionen.');
//alert('preis = ' + preis + '\np1 = ' + p1 + '\np2 =' + p2 + '\np3 = ' + p3 + 'CPreis = ' + CPreis);
return (CPreis);
}
function getKomma(zahl)
{
var zahl0 = new String(zahl);
//alert(zahl0.length);
teil1 = zahl0.length - 2;
//alert('teil1 = ' + teil1);
zahl1 = zahl0.substr(0,teil1);
zahl2 = zahl0.substr(teil1,2);
zahlk = zahl1 + ',' + zahl2;
//alert('zahl = ' + zahlk);
return(zahlk);
}Die erste Funktion eleminiert das Komma, da Javascript damit nicht rechnen kann und die zweite fügt im Anschluss an die Berechnung ein Komma wieder ein.
Verwendung (so ungefähr):preis = '2,10'
nokomma_preis = PreisCheck(preis);
summe = parseInt(summe) + parseInt(nokomma_preis);
print_preis = getKomma(summe);Wenn du zwischendurch nicht nur addieren, sondern auch multiplizieren musst, schau noch mal nach "round" und "floor" beim math-pbjekt.
Nachweihnachtliche Grüße
Günter