Funktion auf Array anwenden und auf Arrayelemente zugreifen

[Al3x0r]

Hallo,

Ich habe ein Problem mit JS.

Folgendes habe ich mir gebastelt um on the fly ne Rechnung auszugeben

<script type="text/javascript">
 function zaehler(){
   var WertA = document.form2.wert1.value;
   var WertB = document.form2.wert2.value;
   var WertC = document.form2.wert3.value;
	 var WertD = document.form2.wert4.value;
   document.form2.flaeche.value=WertA*1 + WertB*1 + WertC*1 + WertD*1;
 }
</script>

Das funktioniert auch soweit. Mein Problem ist, dass ich diese Funktion auf

Die Felder wert1[], wert2[] usw. anwendem will, also wert1, wert2, wert3, wert4 und flaeche sind jeweils ein Array.

Ich dachte mir nun sowas

<input type='text' name='wert1[]' onKeyUp='zaehler();' />
<input type='text' name='wert2[]' onKeyUp='zaehler();' />
<input type='text' name='wert3[]' onKeyUp='zaehler();' />
<input type='text' name='wert4[]' onKeyUp='zaehler();' />
<input type='text' name='flaeche[]' onKeyUp='zaehler();' />

und dann in JS

<script type="text/javascript">
 function zaehler(){
   var WertA = document.form2.wert1[].value;
   var WertB = document.form2.wert2[].value;
   var WertC = document.form2.wert3[].value;
	 var WertD = document.form2.wert4[].value;
   document.form2.flaeche[].value=WertA*1 + WertB*1 + WertC*1 + WertD*1;
 }
</script>

das funzt allerdings nicht...

Da ich eine Variable habe, die hochgezählt wird, dachte ich dann an sowas:

<input type='text' name='wert1[".$i."]' onKeyUp='zaehler(".$i.");' />
<input type='text' name='wert2[".$i."]' onKeyUp='zaehler(".$i.");' />
<input type='text' name='wert3[".$i."]' onKeyUp='zaehler(".$i.");' />
<input type='text' name='wert4[".$i."]' onKeyUp='zaehler(".$i.");' />
<input type='text' name='flaeche[".$i."]' onKeyUp='zaehler(".$i.");' />

und dann in JS

<script type="text/javascript">
 function zaehler(id){
   var WertA = document.form2.wert1[id].value;
   var WertB = document.form2.wert2[id].value;
   var WertC = document.form2.wert3[id].value;
	 var WertD = document.form2.wert4[id].value;
   document.form2.flaeche[id].value=WertA*1 + WertB*1 + WertC*1 + WertD*1;
 }
</script>

Das funzt allerdings auch nicht... Irgendwie raffe ich nicht so ganz wie das nun gehen soll und wäre sehr dankbar wenn mir jemand helfen würde. Ich sitze seit mitlerweile 4 Stunden an diesem banalen Problem, war schon mindestens 10 mal kurz davor eine Schere durch meinen TFT zu werfen oder sonstige Peripherie zu zerstören. Diverse Internetquellen liefern auch nur scheiße und ich bin mit meinem latein am Ende

danke Alex

[ein schlauer]

SELFHTML: JavaScript / Objektreferenz / elements (Beispiel 4)

[Al3x0r]

Ich liebe solche Posts und fasse mich manchmal auch so knapp, nun weiß ich wie beschissen sich die Leser fühlen müssen.


Ich habe mal etwas weiter gebastelt:

<script type="text/javascript">
function zaehler(id){
   var WertA = document.form2["wert1[id]"].value;
   var WertB = document.form2["wert2[id]"].value;
   var WertC = document.form2["wert3[id]"].value;
   var WertD = document.form2["wert4[id]"].value;
   document.form2["flaeche[id]"].value=WertA*1 + WertB*1 + WertC*1 + WertD*1;
}
</script>

und das ist der HTML Teil:

<input type='text' name='wert1[".$B_z."]'  onKeyUp='zaehler(".$B_z.");' />
<input type='text' name='wert2[".$B_z."]'  onKeyUp='zaehler(".$B_z.");' />
<input type='text' name='wert3[".$B_z."]'  onKeyUp='zaehler(".$B_z.");' />
<input type='text' name='wert4[".$B_z."]'  onKeyUp='zaehler(".$B_z.");' />
<input type='text' name='flaeche[".$B_z."]'  onKeyUp='zaehler(".$B_z.");' />

$B_z ist eine Variable, die in einer For schleife hochzählt.

Mein Problem ist nun folgendes:

Wenn ich das oben gezeigt Konstrukt aus 5 Input Feldern nur einmal brauchen würde, würde die Funktion funktionieren.

Das sähe dann so aus:

<script type="text/javascript">
function zaehler(){
   var WertA = document.form2.wert1.value;
   var WertB = document.form2.wert2.value;
   var WertC = document.form2.wert3.value;
   var WertD = document.form2.wert4.value;
   document.form2.flaeche.value=WertA*1 + WertB*1 + WertC*1 + WertD*1;
}
</script>

+

<input type='text' name='wert1'  onKeyUp='zaehler();' />
<input type='text' name='wert2'  onKeyUp='zaehler();' />
<input type='text' name='wert3'  onKeyUp='zaehler();' />
<input type='text' name='wert4'  onKeyUp='zaehler();' />
<input type='text' name='flaeche'  onKeyUp='zaehler();' />

und funzt astrein.

Das Problem ist, dass wert1, wert2, wert3, wert4 und flaeche alle samt jeweils ein Array sind.

Das heisst ich habe dann im Quellcode folgendes stehen:

<input type='text' name='wert1[0]'  onKeyUp='zaehler(0);' />
<input type='text' name='wert2[0]'  onKeyUp='zaehler(0);' />
<input type='text' name='wert3[0]'  onKeyUp='zaehler(0);' />
<input type='text' name='wert4[0]'  onKeyUp='zaehler(0);' />
<input type='text' name='flaeche[0]'  onKeyUp='zaehler(0);' />

und JS:

<script type="text/javascript">
function zaehler(id){
   var WertA = document.form2.wert1[id].value;
   var WertB = document.form2.wert2[id].value;
   var WertC = document.form2.wert3[id].value;
   var WertD = document.form2.wert4[id].value;
   document.form2.flaeche[id].value=WertA*1 + WertB*1 + WertC*1 + WertD*1;
}


Ich finde es so, wie ich es geschrieben habe absolut logisch, doch es funzt nicht. Vielleicht bin ich verwöhnt von PHP und JS ist einfach zu kompliziert oder so. Ich finde es nett, dass sich jemand die Mühe macht und sich diesen Thread anguckt , nur leider bringt mir das Posten eines einfachen Links nichts...

mfg Alex
</script>

[pit-r]

Moin!

Ich liebe solche Posts und fasse mich manchmal auch so knapp, nun weiß ich wie beschissen sich die Leser fühlen müssen.

Wieso? ein schlauer hat Dir die Lösung gepostet!

Hier im Klartext und etwas kürzer:

var WertA=document.form2['wert1['+id+']'].value;

Ahoi - Pit

[Al3x0r]

Funktioniert perfekt, vielen herzlichen dank. Ich könnte mit dem Fachchinesisch aber ernsthaft nichts anfangen...

[ein schlauer]

Funktioniert perfekt, vielen herzlichen dank. Ich könnte mit dem Fachchinesisch aber ernsthaft nichts anfangen...

Was für Fachchinesisch ?

Mit dem Namen des Formulars und des Elements als Indexnamen (wie in Schema 4 / Beispiel 4)
Diese Art ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Geben Sie mit document.forms["Formularname"].elements["Elementname"] den Namen des Formulars und des Elements als String an. Diese Schreibweise wird insbesondere für den Zugriff auf Formularelemente benötigt, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 und 3 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Formularnamen bzw. den Elementnamen enthält.

Was ist daran nicht zu verstehen, vor allem nachdem du hier ellenlange Beispiele gezeigt hast, war mir nicht klar, dass du mit Begriffen wie Element, Objekt oder String nichts anfangen kannst.