[FRAGE] Rechnen mit Java Script

budd · 13. Apr. 2014

Hallo,
nach vielen Tagen und Stunden habe ich mich entschloßen mal hier im Forum nach meinem Problem zu fragen.
Ich habe ein HTML-Formular in dem per Java Script gerechnet wird.

Beispiel:

Zeile1: feld1 - feld2 + feld3 = feld4(ergebnis)
Zeile1: feld1 - feld2 + feld3 = feld5(ergebnis)...........

Das klappt auch.
nun möchte ich die Ergebnisse in einer Gesamtsumme im feldx anzeigen.
Leider bekomme ich das nicht hin. Hat jemand eine Idee und könnte mir helfen?

Auszug Javascript:

Code:

<script type="text/javascript"><!--
 
 function calculate() {
 	ges1 = parseFloat( document.kommentar.ges1.value.replace(/,/ , ".") );
 	re1 = parseFloat( document.kommentar.re1.value.replace(/,/ , ".") );
 	as1 = parseFloat( document.kommentar.as1.value.replace(/,/ , ".") );	
	document.kommentar.sum1.value = kaufm2 (parseFloat(ges1 - re1 + as1 ));
} 
 //--></script>

Auszug html:

Code:

              <input name="ges1" type="text" id="ges1" onkeyup="calculate()" value="0,00" size="7" /></td>
              <td width="5%" align="left" ><strong>€</strong></td>
              <td width="4%" align="left" ><input name="re1" type="text" class="Infotext1"   id="re1" value="0,00" onkeyup="calculate()" size="7"/></td>
              <td width="1%" align="left" ><strong>€</strong></td>
              <td width="8%" align="left" ><input name="as1" type="text" class="Infotext1"   id="as1" value="0,00" onkeyup="calculate()" size="7"/></td>
              <td width="2%" align="left" ><strong>€</strong></td>
              <td width="9%" align="left" ><input name="sum1" type="text" class="schrift" id="sum1" size="7"  value="0,00"/></td>

rico2009 · 13. Apr. 2014

Nehmen wir mal an, dass Feld hat die id "feldx". Dann kannst du deine Gesamtsumme so zuweisen:

Code:

document.getElementById("feldx").value = (ges1 - re1 + as1);

budd · 14. Apr. 2014

Hallo rico,

danke das Du Dich mit meinem Problem beschäftigst.
So etwas ähnliches hatte ich schon versucht, klappt aber leider nicht.
Zum besseren Verständnis hänge ich mal ein Screenshot vom Formular an.

mikdoe · 14. Apr. 2014

budd schrieb:
So etwas ähnliches hatte ich schon versucht, klappt aber leider nicht.

Was genau klappt denn nicht? Und gibt es Meldungen in der Fehlerkonsole (F12)?

kkapsner · 14. Apr. 2014

Und zeig' uns doch mal den Code, den du probiert hast.

budd · 14. Apr. 2014

Hallo,

Hier also mal der Code.

Javascript Teil:

Code:

<script language="JavaScript" type="text/javascript"><!--
function kaufm2(x) {
  var k = (Math.round(x * 100) / 100).toString();
  k += (k.indexOf('.') == -1)? '.00' : '00';
  var p = k.indexOf('.');
  return k.substring(0, p) + ',' + k.substring(p+1, p+3);
}

// --></script>
<script type="text/javascript"><!--
 
 function calculate() {
 	ges1 = parseFloat( document.kommentar.ges1.value.replace(/,/ , ".") );
 	re1 = parseFloat( document.kommentar.re1.value.replace(/,/ , ".") );
 	as1 = parseFloat( document.kommentar.as1.value.replace(/,/ , ".") );	
	document.kommentar.sum1.value = kaufm2 (parseFloat(ges1 - re1 + as1 ));
}
 
 
 //--></script>
<script type="text/javascript"><!--
 
 function calculate1() {
 	ges2 = parseFloat( document.kommentar.ges2.value.replace(/,/ , ".") );
 	re2 = parseFloat( document.kommentar.re2.value.replace(/,/ , ".") );
 	as2 = parseFloat( document.kommentar.as2.value.replace(/,/ , ".") );
	document.kommentar.sum2.value = kaufm2 (parseFloat(ges2 - re2 + as2));
 }
 
 //--></script>
 <script type="text/javascript"><!--
 
 function calculate2() {
 	ges3 = parseFloat( document.kommentar.ges3.value.replace(/,/ , ".") );
 	re3 = parseFloat( document.kommentar.re3.value.replace(/,/ , ".") );
 	as3 = parseFloat( document.kommentar.as3.value.replace(/,/ , ".") );
	document.kommentar.sum3.value = kaufm2 (parseFloat(ges3 - re3 + as3));
 
 }
 
 //--></script>
 <script type="text/javascript"><!--
 
 function calculate3() {
 	ges4 = parseFloat( document.kommentar.ges4.value.replace(/,/ , ".") );
 	re4 = parseFloat( document.kommentar.re4.value.replace(/,/ , ".") );
 	as4 = parseFloat( document.kommentar.as4.value.replace(/,/ , ".") );
	document.kommentar.sum4.value = kaufm2 (parseFloat(ges4 - re4 + as4));
 }
 //--></script>
 
 <script type="text/javascript"><!--
 
 function calculate4() {
 	ges5 = parseFloat( document.kommentar.ges5.value.replace(/,/ , ".") );
 	re5 = parseFloat( document.kommentar.re5.value.replace(/,/ , ".") );
 	as5 = parseFloat( document.kommentar.as5.value.replace(/,/ , ".") );
	document.kommentar.sum5.value = kaufm2 (parseFloat(ges5 - re5 + as5));
 }
 //--></script>
  
 <script type="text/javascript"><!--
 
 function calculate5() {
 	ges6 = parseFloat( document.kommentar.ges6.value.replace(/,/ , ".") );
 	re6 = parseFloat( document.kommentar.re6.value.replace(/,/ , ".") );
 	as6 = parseFloat( document.kommentar.as6.value.replace(/,/ , ".") );
	document.kommentar.sum6.value = kaufm2 (parseFloat(ges6 - re6 + as6));
 }
 //--></script> 

<script type="text/javascript"><!--
 
 function calculate6() {
 	ges7 = parseFloat( document.kommentar.ges7.value.replace(/,/ , ".") );
 	re7 = parseFloat( document.kommentar.re7.value.replace(/,/ , ".") );
 	as7 = parseFloat( document.kommentar.as7.value.replace(/,/ , ".") );
	document.kommentar.sum7.value = kaufm2 (parseFloat(ges7 - re7 + as7));
 }
 //--></script> 
 
 <script type="text/javascript"><!--
 
 function calculate7() {
 	ges8 = parseFloat( document.kommentar.ges8.value.replace(/,/ , ".") );
 	re8 = parseFloat( document.kommentar.re8.value.replace(/,/ , ".") );
 	as8 = parseFloat( document.kommentar.as8.value.replace(/,/ , ".") );
	document.kommentar.sum8.value = kaufm2 (parseFloat(ges8 - re8 + as8));
 }
 //--></script> 
 
 <script type="text/javascript"><!--
 
 function calculate8() {
 	ges9 = parseFloat( document.kommentar.ges9.value.replace(/,/ , ".") );
 	re9 = parseFloat( document.kommentar.re9.value.replace(/,/ , ".") );
 	as9 = parseFloat( document.kommentar.as9.value.replace(/,/ , ".") );
	document.kommentar.sum9.value = kaufm2 (parseFloat(ges9 - re9 + as9));
 }
 //--></script>
 
 <script type="text/javascript"><!--
 
 function calculate9() {
 	ges10 = parseFloat( document.kommentar.ges10.value.replace(/,/ , ".") );
 	re10 = parseFloat( document.kommentar.re10.value.replace(/,/ , ".") );
 	as10 = parseFloat( document.kommentar.as10.value.replace(/,/ , ".") );
	document.kommentar.sum10.value = kaufm2 (parseFloat(ges10 - re10 + as10));
 }
 //--></script>
 
<script type="text/javascript"> 
function gesamt() {
	sum1 = parseFloat( document.kommentar.sum1.value.replace(/,/ , ".") );
	sum2 = parseFloat( document.kommentar.sum2.value.replace(/,/ , ".") );
	sum3 = parseFloat( document.kommentar.sum3.value.replace(/,/ , ".") );
	sum4 = parseFloat( document.kommentar.sum4.value.replace(/,/ , ".") );
	sum5 = parseFloat( document.kommentar.sum5.value.replace(/,/ , ".") );
	sum6 = parseFloat( document.kommentar.sum6.value.replace(/,/ , ".") );
	sum7 = parseFloat( document.kommentar.sum7.value.replace(/,/ , ".") );
	sum8 = parseFloat( document.kommentar.sum8.value.replace(/,/ , ".") );
	sum9 = parseFloat( document.kommentar.sum9.value.replace(/,/ , ".") );
	sum10 = parseFloat( document.kommentar.sum10.value.replace(/,/ , ".") );
document.getElementById("sum11").value = kaufm2 (parseFloat(sum1 + sum2 + sum3 + sum4 + sum5 + sum6 + sum7 + sum8 + sum9 + sum10));
 }
 </script>

Html Teil Auszug:

Code:

     <td width="4%" align="left" class="Infotext1">< input name="ges1" type="text" class="Infotext1" id="ges1" onkeyup="calculate()" value="0,00" size="7" /></td>
              <td width="5%" align="left" class="Infotext1"><strong>€</strong></td>
              <td width="4%" align="left" class="Infotext1"><input name="re1" type="text" class="Infotext1"   id="re1" value="0,00" onkeyup="calculate()" size="7"/></td>
              <td width="1%" align="left" class="Infotext1"><strong>€</strong></td>
              <td width="8%" align="left" class="Infotext1"><input name="as1" type="text" class="Infotext1"   id="as1" value="0,00" onkeyup="calculate()" size="7"/></td>
              <td width="2%" align="left" class="Infotext1"><strong>€</strong></td>
              <td width="9%" align="left" class="Infotext1"><input name="sum1" type="text" class="schrift" id="sum1" size="7" onkeyup="gesamt()" value="0,00"/></td>
              <td width="6%" align="left" class="Infotext1"> </td>

Sum1 -sum10 wird normal berechnet. Nur wie bekomme ich am Ende die Gesamtsumme hin?

Vielen Dank für Eure Hilfe.

kkapsner · 15. Apr. 2014

Oh... du solltest dringend lernen, wie man Parameter verwendet. Die Funktionen calculate() bis caclulate9() sind ja komplett redundant und wenn du die Formel vielleicht mal ändern willst, musst du das an zehn Stellen machen. Du könntest als Parameter z.B. die Nummer, die immer hinter den Namen steht verwenden:

Code:

function calculate(idx){
	var ges = parseFloat(document.kommentar["ges" + idx].value.replace("," , ".")) || 0;
	var re = parseFloat(document.kommentar["re" + idx].value.replace("," , ".")) || 0;
	var as = parseFloat(document.kommentar["as" + idx].value.replace("," , ".")) || 0;
	document.kommentar["sum" + idx].value = (ges - re + as).toFixed(2).replace(".", ",");
	
	gesamt();
}
function gesamt(){
	var sum = 0;
	for (var i = 1; i < 11; i += 1){
		sum += parseFloat(document.kommentar["sum" + i].value.replace("," , ".")) || 0;
	}
	document.getElementById("sum11").value = sum.toFixed(2).replace(".", ",");
}

Wie Code schon gezeigt musst du deine gesamt()-Funktion auch bei jedem calculate-Aufruf aufrufen. Bei dir wurde das nur aufgerufen, wenn man etwas in ein sum-Feld mit der Tastatur reingeschrieben hat - auf Änderungen des Wertes per Skript reagiert das onkeyup-Event nicht.

PS: Dass bei dir jede Variable global ist, ist hoffentlich ein Versehen...
PPS: Deine Funktion kaufm2() ist unnötig kompliziert - hab' das im Code oben vereinfacht.
PPPS: das "|| 0" verhindert, dass das Ganze "NaN" ausgibt, wenn der Nutzer mal was anderes als Zahlen in die Felder reinschreibt.

budd · 15. Apr. 2014

Hallo kkapsner,

Du sagst ich soll den Umgang mit Parametern lernen???? Neeeeeee, ich sollte Javascript lernen

Ehrlich gesagt war ich noch nie in der Verlegenheit sowas zu programmieren. Bin da ins kalte Wasser geworfen worden.
Ich war ja schon froh das es mir die Summen pro Zeile ausgerechnet hat.
Deshalb würde ich es schätzen wenn ich Deine Hilfe weiter in Anspruch nehmen könnte?

Du schreibst ich muss den Input-Feldern die Funktion gesamt() mitgeben-------wie mache ich das?

Code:

<input name="ges1" type="text" class="Infotext1" id="ges1" onkeyup="calculate()" [B]"gesamt()"[/B]  value="0,00" size="7" />

so?

mikdoe · 15. Apr. 2014

Nein, der Aufruf von gesamt() steht schon in der Calculate. An den Inputs nichts ändern.

budd · 15. Apr. 2014

Hallo mikdoe,

danke für die Info. Leider rechnet es nicht.

kkapsner · 15. Apr. 2014

budd schrieb:
Du sagst ich soll den Umgang mit Parametern lernen???? Neeeeeee, ich sollte Javascript lernen

Das eine schließt das Andere nicht aus... du solltest beides lernen.

budd schrieb:
Ehrlich gesagt war ich noch nie in der Verlegenheit sowas zu programmieren. Bin da ins kalte Wasser geworfen worden.

Leider hat JS den Ruf, dass jeder ohne Vorkenntnisse da was machen kann, was leider nicht wahr ist... hier kommen oft Leute in deiner Situation vorbei.

budd schrieb:
Deshalb würde ich es schätzen wenn ich Deine Hilfe weiter in Anspruch nehmen könnte?

Du kannst gerne weitere Fragen hier im Forum stellen... ob dann ich oder ein Anderer dir hilft steht in den Sternen.

budd schrieb:
Du schreibst ich muss den Input-Feldern die Funktion gesamt() mitgeben

Das habe ich nicht gesagt, sondern dass gesamt() in der calculate() aufgerufen werden muss. So wie ich es in dem Code gemacht habe. Ich hab' den zwar nicht getestet, aber kopier den doch einfach mal und schau' ob alles funktioniert...

PS: wenn es nicht funktioniert, wirf' doch mal einen Blick in die Fehlerkonsole - vielleicht steht da was.

budd · 15. Apr. 2014

Hallo kkapsner,

Du hast mit Deinen Aussagen natürlich vollkommen recht.
Die Fehlerkonsole gibt mir folgendes aus:

Code:

document.kommentar[("ges" + idx)] is undefined

kkapsner · 15. Apr. 2014

Oh... hab' vergessen, dass du die Aufrufe von calculate() natürlich schon ändern musst:

Code:

<input name="re1" type="text" class="Infotext1"   id="re1" value="0,00" onkeyup="calculate(1)" size="7"/>

Du musst dem calculate() natürlich die Nummer der Zeile übergeben (also 1-10).

budd · 15. Apr. 2014

Vielen Dank an Euch alle! Es funktioniert einwandfrei!

mikdoe · 15. Apr. 2014

Empfehl' uns weiter!

budd · 15. Apr. 2014

Gerne!!!

kkapsner · 15. Apr. 2014

Bitte - gern geschehen.

[FRAGE] Rechnen mit Java Script

budd

New member

rico2009

Guest

budd

New member

mikdoe

Moderator

kkapsner

Super Moderator

budd

New member

kkapsner

Super Moderator

budd

New member

mikdoe

Moderator

budd

New member

kkapsner

Super Moderator

budd

New member

kkapsner

Super Moderator

budd

New member

mikdoe

Moderator

budd

New member

kkapsner

Super Moderator