10x10 Feld

[Thorsten F.]

Hallo Leute,

mach ich grad nen Denkfehler oder sowas? Warum liefert mir diese Funktion

function feld()
{
 var ymax = 10;
 var xmax = 10;
 var i;
 var j;
 var k=0;
   for (j=0; j<ymax; j++)
   {
     for (i=0; i<xmax; i++)
     {
   document.writeln('<img src="test1.gif">');
     }
   }
}

kein 10x10-Feld? Als Ausgabe erscheint das Bild 130 Mal hintereinander.

Muss ich da irgendwie mit Arrays arbeiten oder so? Oder stimmt der Code einfach nicht? Habe mal ein bisl gegoogelt und rausgefunden, dass das eigentlich viele so machen, sei es in C oder Java oder JS.
Jemand einen Rat?

Gruß
Thorsten F.

[FraFu]

Hallo!

Wenn schon ein 10x10 Feld, dann musst du am Ende der äußeren Schleife noch einen Zeilenumbruch einbauen (document.writeln("<br>");).
Dann wird ein 10x10 Feld ausgegeben. Wie du auf 130 kommst, kann ich mir nicht erklären.
Bei mir werden 100 Felder ausgegeben.

mfg
  frafu

[Thorsten F.]

Besten Dank Leute.

Habs mittlerweile auch gecheckt. Habe das mal mit einer Tabelle gemacht und es stellt ein 8x8 Feld da.

function feld()
{
 var row = 8;
 var column = 8;
 var zeile;
 var spalte;

document.writeln('<table align="center">');

for(zeile=0;zeile<row;zeile++)
 {
  document.writeln('<tr>');

for(spalte=0;spalte<column;spalte++)
   document.writeln('<td align="center"><img src="test1.gif"></td>');

document.writeln('</tr>');
 }

document.writeln('</table>');
}

THX

[lina-]

moin Thorsten :)

Jemand einen Rat?

du musst schon auch noch sagen, wo die nächste Zeile beginnen soll ;)
 function feld()
 {
  var ymax = 10;
  var xmax = 10;
  var i;
  var j;
  var k=0;
    for (j=0; j<ymax; j++){
      for (i=0; i<xmax; i++){
        document.writeln('<img src="test1.gif">');
      }
      document.writeln('<br/>');
    }
 }

liebe Grüße aus Berlin
lina-

[Peter]

Hi,

du schreibst das ja auch einfach 100 mal hintereinander.
Du mußt nach jedem inneren Schleifendurchlauf ne neue Zeile reinmachen.
z.B.:

function feld()
{
var ymax = 10;
var xmax = 10;
var i;
var j;
var k=0;
   for (j=0; j<ymax; j++)
   {
     for (i=0; i<xmax; i++)
     {
   document.writeln('<img src="test1.gif">');
     }

document.writeln('<br>');

}
}

Wenn die Seite nicht breit genug ist für zehn Bilder, wird dann aber auch innerhalb der Zeile umgebrochen!

kein 10x10-Feld? Als Ausgabe erscheint das Bild 130 Mal hintereinander.

Sollten eigentlich 100 Bilder sein !

Gruß
Peter

[Thorsten F.]

var row = 8;
   var column = 8;
   var zeile;
   var spalte;

document.writeln('<p align="center">Finden Sie die beiden richtigen Felder. 5 Versuche!!!</p>');

document.writeln('<table align="center">');

for(zeile=0;zeile<row;zeile++)
   {
    document.writeln('<tr>');

for(spalte=0;spalte<column;spalte++)
    {
     document.writeln('<td align="center"><img src="test1.gif" id="test'+x+'" wert="feld'+x+'"></td>');
    }

document.writeln('</tr>');
   }

document.writeln('</table>');

Wie kann ich denn jetzt jedem Feld eine eindeutige ID und einen eindeutigen Wert zuweisen?

Das erste Feld soll als id "test1" haben, das zweite "test2"  usw. bis zum Feld 64 mit id als "test64".

document.writeln('<td align="center"><img src="test1.gif" id="test'+?+'" wert="feld'+?+'">');

[FraFu]

Hallo!

document.writeln('<td align="center"><img src="test1.gif" id="test'+?+'" wert="feld'+?+'">');

wert="feld'+((i*1+1)*(j*1+1))+"'

i*1 bzw j*1 sind AFAIK notwendig, ansonsten wird i als String interpretiert. Bin mir jetzt aber nicht sicher.

mfg
  frafu

[Peter]

Hi,

Wie kann ich denn jetzt jedem Feld eine eindeutige ID und einen eindeutigen Wert zuweisen?

Das erste Feld soll als id "test1" haben, das zweite "test2"  usw. bis zum Feld 64 mit id als "test64".

document.writeln('<td align="center"><img src="test1.gif" id="test'+((i+1)*(j+1))+'" wert="feld'+((i+1)*(j+1))+'">');

Die Typumwandlung von Integer zu String macht Javascript automatisch, wenn du ne Zahl mit nem String zusammensetzt,
du kannst es aber auch explizit angeben:

document.writeln('<td align="center"><img src="test1.gif" id="test'+String((i+1)*(j+1))+'" wert="feld'+String((i+1)*(j+1))+'">');

Gruß
Peter

[Peter]

Hi,

document.writeln('<td align="center"><img src="test1.gif" id="test'+((i+1)*(j+1))+'" wert="feld'+((i+1)*(j+1))+'">');

war jetzt natürlich ein Denkfehler von mir ( und FraFru ).
Die Rechnung ergibt natürlich die falschen Werte.

Empfehle lina-'s Methode, is natürlich die einfachste.

Oder so:

document.writeln('<td align="center"><img src="test1.gif" id="test'+String(zeile+1)+String(spalte+1))+'" wert="feld'+String(zeile+1)+String(spalte+1))+'">');

Gruß
Peter

[FraFu]

Hallo!»» Hi,

document.writeln('<td align="center"><img src="test1.gif" id="test'+((i+1)*(j+1))+'" wert="feld'+((i+1)*(j+1))+'">');

war jetzt natürlich ein Denkfehler von mir ( und FraFru ).
Die Rechnung ergibt natürlich die falschen Werte.

Häh? Warum? Die Anforderung war von 1 bis zum Ende (64) durchnummerieren. Genau das macht es doch, oder?

Oder so:

document.writeln('<td align="center"><img src="test1.gif" id="test'+String(zeile+1)+String(spalte+1))+'" wert="feld'+String(zeile+1)+String(spalte+1))+'">');

Das schreibt [Zeile+1][Spalte+1] raus. Das war aber laut Angabe nicht gewünscht, oder?

mfg
  frafu

[Peter]

Hi,

document.writeln('<td align="center"><img src="test1.gif" id="test'+((i+1)*(j+1))+'" wert="feld'+((i+1)*(j+1))+'">');

Häh? Warum? Die Anforderung war von 1 bis zum Ende (64) durchnummerieren. Genau das macht es doch, oder?

Nein, das rechnet:

1*1,1*2,1*3,1*4,....
ergibt:
1,2,3,4,....

und dann:

2*1,2*2,2*3,2*4,....
ergibt:
2,4,6,8,......

und dann:

3*1,3*2,3*3,3*4,....
ergibt:
3,6,9,12......

document.writeln('<td align="center"><img src="test1.gif" id="test'+String(zeile+1)+String(spalte+1))+'" wert="feld'+String(zeile+1)+String(spalte+1))+'">');

Das schreibt [Zeile+1][Spalte+1] raus. Das war aber laut Angabe nicht gewünscht, oder?

...ooops, etwas durcheinandergeraten, das sind die Variablen aus dem Script mit der Tabelle.

Gruß
Peter

[FraFu]

Hallo!»» Hi,

document.writeln('<td align="center"><img src="test1.gif" id="test'+((i+1)*(j+1))+'" wert="feld'+((i+1)*(j+1))+'">');

Häh? Warum? Die Anforderung war von 1 bis zum Ende (64) durchnummerieren. Genau das macht es doch, oder?

Nein, das rechnet:
....

Ja natürlich! :-)

mfg
  frafu

[Peter]

Hi,

Oder so:

document.writeln('<td align="center"><img src="test1.gif" id="test'+String(zeile+1)+String(spalte+1))+'" wert="feld'+String(zeile+1)+String(spalte+1))+'">');

... und nochmal falsch.
Schande über mich !!!!

Das würde dann ja bei 11 anfangen.
Und jeweils ne schließende Klammer zuviel is auch drin.

Das hier:
String(zeile)+String(spalte+1)

würde bei 01 anfangen, dann 02,03....09,010,11, etc.
                                        ^^^

Wird auch wieder problematisch, wenn spalte oder zeile größer als 9 bzw. 10 wird.

Da muß man dann noch Bedingungen setzen.

Kann aber sinnvoll werden, wenn man nicht genau 10x10 Felder hat.
Damit bewegt man sich nämlich im Dezimalsystem und Feld 64 nach lina-'s Methode ist die 4. Spalte in der 7. Zeile (bei Startwert 1 ).
Bei Spaltenanzahl ungleich 10 verschiebt sich allerdings alles.

Will man Felder nach Zeilennr./Spaltennr. wiederfinden, setzt man am Besten zwei Strings zusammen.
Die kann mann auch mit z.B. "|" oder einem anderen Zeichen trennen, so daß man sie mit id.split("|") wieder getrennt auslesen kann oder die entsprechende id aus gewünschter Zeilen- und Spaltennummer zusammensetzen kann.

Gruß
Peter

[Sven Rautenberg]

Moin!

Das erste Feld soll als id "test1" haben, das zweite "test2"  usw. bis zum Feld 64 mit id als "test64".

document.writeln('<td align="center"><img src="test1.gif" id="test'+((i+1)*(j+1))+'" wert="feld'+((i+1)*(j+1))+'">');

Dein Ansatz, die Zählvariablen der Schleife zu verwenden, ist nicht verkehrt - nur richtig umsetzen muß man es.

Als Gedankenvorbild unser Zahlensystem zu nehmen ist nicht verkehrt.

Gegeben:

einer = 5
zehner = 3

Wie kriegt man aus den zwei Variablen eine neue, die den Wert 35 hat?

Lösung: einer + 10 * zehner = wert

Die Konstante 10 gibt hierbei an, wieviele verschiedene Ziffern es gibt.

In einem Schachfeld mit nur 8 Feldern geht das ganz genau so. Der Zähler zeile kann der "Zehner" sein, der Zähler spalte der "Einer", und das Zahlensystem steht in row _oder_ column, je nachdem, welcher Wert der höherwertige ist.

  
   var row = 8;  
   var column = 8;  
   var zeile;  
   var spalte;  
  
   for(zeile=0;zeile<row;zeile++)  
   {  
      for(spalte=0;spalte<column;spalte++)  
      {  
         document.write("Zelle " + (spalte + zeile*row) + " - ");  
      }  
      document.write("<br>");  
   }  

Startwerte sind:
zeile = 0
spalte = 0
Ergebnis: 0 + 0*8 = 0

Das letzte Feld der ersten Zeile hat:
zeile = 0
spalte = 7
Ergebnis: 7 + 0*8 = 7

Das erste Feld der zweiten Zeile hat:
zeile = 1
spalte = 0
Ergebnis: 0 + 1*8 = 8

Wenn die Feldnummerierung nicht bei 0, sondern bei 1 beginnen soll, muß man einfach noch +1 addieren.

Und für eine Numerierung nicht in Zeilen, sondern in Spalten, ist das Programm auch schnell umgestellt:

  
   document.write("Zelle " + (spalte*column + zeile ) + " - ");  

Es funktioniert sogar, das Feld komplett von rückwärts numerieren zu lassen (Feld Nr. 0 ganz rechts unten):

  
   document.write("Zelle " + ( (column-spalte-1)*column + (row-zeile-1) ) + " - ";  

Und mit passender Kombination von allen Methoden ist es möglich, auch alle sonst denkbaren Numerierungsrichtungen zu erreichen.

Ich muß allerdings sagen, dass das hochzählen einer schlichten Extra-Variable vermutlich eine schnellere Lösung ist. Erstens hat Javascript wesentlich weniger zu rechnen, und zweitens kommt man schneller drauf. Diese Lösung hilft eben nur dann nicht, wenn die Numerierung anders verlaufen soll, als die Ausgabe der Felder.

Und noch eine Anmerkung: Ich würde die Felder eines Schachbrettes nicht durchnumerieren, sondern ihre Koordinaten in die ID (oder den Namen) integrieren und die zwei Zahlen durch ein Trennzeichen von der Mischung abhalten:

  
   document.write("id='zelle" + zeile + "-" + spalte + "'"); // Ergibt z.B. "zelle5-2"  

Denn Javascript ist es ja vollkommen egal, wie die Bilder oder sonstigen Elemente heißen - Hauptsache, es gibt überhaupt einen eindeutigen Namen.

- Sven Rautenberg

[lina-]

moin Thorsten  :)

Wie kann ich denn jetzt jedem Feld eine eindeutige ID und einen eindeutigen Wert zuweisen?

Du könntest beispielsweise eine variable hochzählen lassen (simpelste methode)

  
    var id=0;  
    for(zeile=0;zeile<row;zeile++){  
     document.writeln('<tr>');  
     for(spalte=0;spalte<column;spalte++){  
       id++;  
       document.writeln('<td align="center"><img src="test1.gif" id="test'+id+'" wert="feld'+x+'"></td>');  
     }  
     document.writeln('</tr>');  
    }  

liebe Grüße aus Berlin
lina-

[Thorsten F.]

Besten Dank. Hätte man ja mit ein bisl Überlegung auch selbst drauf kommen können. Ich sollte mal aufhören immer so kompliziert zu denken.

THX

Gruß,
Thorsten F.