zählen und ausgeben

[Thomas]

Hello,
ich möchte mittels JS in einem input-div die Leerzeichen oder sonstwas zählen und die Anzahl in ein output-div schreiben, habe aber offensichtlich keine Ahnung von JS.

<div id="input1">   </div>  
<div id="output1"></div>  
  
<div id="input2">       </div>  
<div id="output2"></div>  
...  
  
<div id="inputX">         </div>  
<div id="outputX"></div>[code]  
  
Bei einer bekannten Anzahl input/output-Paare geht das ganz gut (vermutlich ginge das auch mit halb so viel Zeilen):  
  
[code]var i = 1;  
   do {  
      var data = document.getElementById('input' + i).innerHTML;  
      var extract = data.split(" ");  
      var ausgabe = extract.length - 1;  
      document.getElementById('output' + i).innerHTML = ausgabe;  
      i = i + 1;  
   } while (i < 10);

Nur ist diese Anzahl leider unbekannt und ich kann für 'i' somit keine obere Grenze definieren. Wenn ich dort einfach < 100 einsetze, motzt offenbar der IE (innerHTML von nicht-existierenden Elementen oder whatever).

Wie könnte man das lösen?

Muchas gracias für die Hilfe!

[rfb]

Moin

var i = 1;

do {
      var data = document.getElementById('input' + i).innerHTML;
      var extract = data.split(" ");
      var ausgabe = extract.length - 1;
      document.getElementById('output' + i).innerHTML = ausgabe;
      i = i + 1;
   } while (document.getElementById('output' + i));

  
also: Schleife solange durchlaufen wie es das ensprechende output- (oder input-) Element gibt.  
  
Gruß  
rfb

-- 
Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.  
(Galileo Galilei)

[Thomas]

Moin

var i = 1;

do {
      var data = document.getElementById('input' + i).innerHTML;
      var extract = data.split(" ");
      var ausgabe = extract.length - 1;
      document.getElementById('output' + i).innerHTML = ausgabe;
      i = i + 1;
   } while (document.getElementById('output' + i));

>   
> also: Schleife solange durchlaufen wie es das ensprechende output- (oder input-) Element gibt.  
>   
> Gruß  
> rfb  
  
  
Wow, herzlichen Dank!

[Thomas]

Hm, könnte man das auch lösen, wenn die input/output-divs nicht schön der Reihe nach von 1 aufsteigend nummeriert sind (also schon aufsteigend, aber nicht immer um 1 erhöht und irgendwo beginnend)?

<div id="input3"> </div>
<div id="output3"></div>

<div id="input5"> </div>
<div id="output5"></div>

[Thomas]

Hm, könnte man das auch lösen, wenn die input/output-divs nicht schön der Reihe nach von 1 aufsteigend nummeriert sind (also schon aufsteigend, aber nicht immer um 1 erhöht und irgendwo beginnend)?

<div id="input3"> </div>
<div id="output3"></div>

<div id="input5"> </div>
<div id="output5"></div>

Well, oder sagen wir einfach, es startet nicht bei 1 sondern irgendwo, wird jedoch immer schön um 1 erhöht. Wie finde ich das erste Input-div?

[rfb]

Moin

du müsstest dann jedesmal prüfen, ob es das Element mit der ID 'input'+i gibt, andernfalls den nächsten Schleifendurchlauf starten. Dabei bräuchtest du natürlich ein völlig anderes Abbruchkriterium.

Alternativ prüfst du einfach alle DIVs in einem bestimmten Bereich ob deren ID 'input' enthält, extrahierst die ID-Nr, und suchst das entsprechende 'output' DIV.

Gruß
rfb

[Thomas]

Alternativ prüfst du einfach alle DIVs in einem bestimmten Bereich ob deren ID 'input' enthält, extrahierst die ID-Nr, und suchst das entsprechende 'output' DIV.

Das tönt gut! Nur wie würde das konkret aussehen? Sorry, ich bin da wirklich nicht so bewandert...

[rfb]

Moin

<div id="ioBereich">  
<div id="input3"> </div>  
<div id="output3"></div>  
  
<div id="input5"> </div>  
<div id="output5"></div>  
</div>

function io() {  
var wo=document.getElementById("ioBereich");  
if (wo) {  
 var divs=wo.getElementsByTagName("div");  
 for (var i=0;i<divs.length;i++) {  
  var idee=divs[i].id;  
  if (idee.indexOf("input")==0) {  
   var nr=idee.substr(5);  
   var out=document.getElementById('output'+nr);  
   if (out) {  
      var data = divs[i].innerHTML;  
      var extract = data.split(" ");  
      var ausgabe = extract.length - 1;  
      out.innerHTML = ausgabe;  
   }  
  }  
 }  
}  
}

Gruß
rfb

[Thomas]

Funktioniert perfekt, grazie mille!

[seppel]

hi,

bei input-feldern würde ich das so machen:

  
function CountElements(field)  
{  
  if (!field.length)  // nur ein Element...deswegen kein Array  
  {  
    alert("1 Element mit "+field.value.length+" Zeichen");  
  }  
  else  
  {  
    var count;  
    for (i=0;i<field.length;i++)  
    {  
      count=count+field[i].value.length;  
    }  
    alert(field.length+" Elemente mit "+count+" Zeichen");  
  }  
}  

  
<form>  
<input type="button" onclick="CountElements(this.form.list)" ...>  
...  
   <input type="text" name="list" ...>  
   <input type="text" name="list" ...>  
   usw.  
...  
</form>  

Sollte auch mit output-feldern gehen...

Gruss,
Seppel

[rfb]

Moin

Sollte auch mit output-feldern gehen...

was für output-Felder kennst du im Zusammenhang mit Formularen?

Gruß
rfb

[seppel]

najo, da waren die Finger schneller als die Überlegung...dafür müsste man wohl doch eher das innerHTML zählen.

Ich stell mich dann mal in die Ecke und schäme mich ;-)