Javascript Fehler beim Array?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

23:14, 2.1.2012

Hi

ich stehe schon fast vorm Verzweifeln, da ich meinen Fehler einfach nicht finde.

Ich baue grad eine Webseite, in welcher man elektronische Schaltkreise nachbauen können soll. Dafür versuche ich einen JavaScript-Bau-Editor zu entwickeln. Die Elemente werden in einem Raster oder Gitter (einfache HTML-Tabelle) dargestellt, der Inhalt von jedem Kasten wird in einem zweidimensionalen JS-Array gespeichert. Eine PHP-Funktion generiert diesen Array:

var elementsArray = new Array();

elementsArray[1] = new Array(30);elementsArray[1][1] = '0';elementsArray[1][2] = '0';
elementsArray[1][3] = '0';elementsArray[1][4] = '0';elementsArray[1][5] = '0';
elementsArray[1][6] = '0';elementsArray[1][7] = '0';elementsArray[1][8] = '0';
elementsArray[1][9] = '0';elementsArray[1][10] = '0';elementsArray[1][11] = '0';
elementsArray[1][12] = '0';elementsArray[1][13] = '0';elementsArray[1][14] = '0';
elementsArray[1][15] = '0';elementsArray[1][16] = '0';elementsArray[1][17] = '0';
elementsArray[1][18] = '0';elementsArray[1][19] = '0';elementsArray[1][20] = '0';
elementsArray[1][21] = '0';elementsArray[1][22] = '0';elementsArray[1][23] = '0';
elementsArray[1][24] = '0';elementsArray[1][25] = '0';elementsArray[1][26] = '0';
elementsArray[1][27] = '0';elementsArray[1][28] = '0';elementsArray[1][29] = '0';
elementsArray[1][30] = '0'elementsArray[2] = new Array(30);elementsArray[2][1] = '0';
elementsArray[2][2] = '0';elementsArray[2][3] = '0';elementsArray[2][4] = '0';
elementsArray[2][5] = '0';elementsArray[2][6] = '0';elementsArray[2][7] = '0';
elementsArray[2][8] = '0';elementsArray[2][9] = '0';elementsArray[2][10] = '0';

...

elementsArray[10][30] = '0';

Eine andere PHP-Funktion fügt aus einem demselben Array, aus dem später der obige JS-Array generiert wird, alles zu der Tabelle zusammen:

<table border="1" frame="void" cellspacing="1" cellpadding="0">
 <tr id='1'><td><div onClick="changeTableContent('1', '1')">0<img src='img/empty.png' border='0' width='30' id='1/1'></div></td><td><div onClick="changeTableContent('1', '2')">0<img src='img/empty.png' border='0' width='30' id='1/2'></div></td><td><div onClick="changeTableContent('1', '3')">0<img src='img/empty.png' border='0' width='30' id='1/3'></div></td><td><div onClick="changeTableContent('1', '4')">0<img src='img/empty.png' border='0' width='30' id='1/4'></div></td><td><div onClick="changeTableContent('1', '5')">0<img src='img/empty.png' border='0' width='30' id='1/5'></div></td><td><div onClick="changeTableContent('1', '6')">0<img src='img/empty.png' border='0' width='30' id='1/6'></div></td><td><div onClick="changeTableContent('1', '7')">0<img src='img/empty.png' border='0' width='30' id='1/7'></div></td><td><div onClick="changeTableContent('1', '8')">0<img src='img/empty.png' border='0' width='30' id='1/8'></div></td><td><div onClick="changeTableContent('1', '9')">0<img src='img/empty.png' border='0' width='30' id='1/9'></div></td><td><div onClick="changeTableContent('1', '10')">0<img src='img/empty.png' border='0' width='30' id='1/10'></div></td><td><div onClick="changeTableContent('1', '11')">0<img src='img/empty.png' border='0' width='30' id='1/11'></div></td><td><div onClick="changeTableContent('1', '12')">0<img src='img/empty.png' border='0' width='30' id='1/12'></div></td><td><div onClick="changeTableContent('1', '13')">0<img src='img/empty.png' border='0' width='30' id='1/13'></div></td><td><div onClick="changeTableContent('1', '14')">0<img src='img/empty.png' border='0' width='30' id='1/14'></div></td>
...

Die Tabelle wird korrekt generiert und angezeigt. Bei einem klick auf eins der Felder wird die Funktion changeTableContent aufgerufen:

function changeTableContent(x, y)
 {
	 elementsArray.splice(x, y, selectedElement);
	 refreshTable(x,y);
}

Die Variable selectedElement wurde vorher definiert und stellt das Element (z.B. Schalter oder Batterie) dar, das beim Baukasten ausgewählt ist.
Bei dieser Funktion wird eine neue Funktion aufgerufen:

function refreshTable(x,y)
            {
            if (typeof(x) != "undefined")
                {
                alert(elementsArray[x][y]);
                }
            }

Wenn ich jetzt aber auf eines der Felder klicke, kommt nicht der neue Wert, sondern "undefined".
Wenn ich den Code umwandle in alert(elementsArray[x]); dann wird das korrekte Angezeigt, beim nächsten Klick funktioniert es allerdings nur dann korrekt, wenn der Klick in derselben Zeile oder Spalte wie das letzte Mal vollführt wird.

Mir ist das unerklärlich, nachdem ich jetzt ewig rumgerätselt habe, hoffe ich, dass ihr mir helfen könnt.
Wenn ich etwas vergessen habe oder ihr mehr Code/Informationen braucht, gebt Bescheid.

Danke im Voraus!
LG

Edit: Naja, das, dass es nur dann funktioniert, wenn es in derselben Reihe/Spalte funktioniert, stimmt nicht ganz, wie ich gerade herausgefunden habe. Es funktioniert ziemlich unregelmäßig, beim zweiten oder dritten Klick kommt meistens aber wieder undefined.
Aber theoretisch sollte es überhaupt nicht funktionieren, da in diesem fall der Parameter Y ja fehlt.

Beitrag zuletzt geändert: 3.1.2012 0:42:34 von squid

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fatfreddy

fatfreddy hat kostenlosen Webspace.

3:58, 3.1.2012
Erste Idee, ohne groß weiter ins Detail zu schauen:

Gaps (altdeutsch: Lücken) in der Nummerierung von Array-Elementen führen bei JS zu merkwürdigsten Ergebnissen. ;)
Wer bei JS mit Arrays arbeitet, sollte alles vergessen, was er in anderen Programmiersprachen als "normal" kennengelernt hat.

FF

Autor dieses Themas

squid

squid hat kostenlosen Webspace.

14:11, 3.1.2012

Wenn ich dich genau verstanden habe, dann liegt der Fehler dabei, dass zwischen nicht jedes Array-Element besetzt ist?
Ich habe jetzt dafür gesorgt, dass auch die Array-Elemente mit der Nummer 0 besetzt wurden:

var elementsArray = new Array();
elementsArray[0] = 'none';
elementsArray[1]=new Array(30);elementsArray[1][0]='none';elementsArray[1][1]='0';elementsArray[1][2]='0';elementsArray[1][3]='0';elementsArray[1][4]='0';elementsArray[1][5]='0';elementsArray[1][6]='0';elementsArray[1][7]='0';elementsArray[1][8]='0';elementsArray[1][9]='0';elementsArray[1][10]='0';elementsArray[1][11]='0';elementsArray[1][12]='0';elementsArray[1][13]='0';elementsArray[1][14]='0';elementsArray[1][15]='0';elementsArray[1][16]='0';elementsArray[1][17]='0';elementsArray[1][18]='0';elementsArray[1][19]='0';elementsArray[1][20]='0';elementsArray[1][21]='0';elementsArray[1][22]='0';elementsArray[1][23]='0';elementsArray[1][24]='0';elementsArray[1][25]='0';elementsArray[1][26]='0';elementsArray[1][27]='0';elementsArray[1][28]='0';elementsArray[1][29]='0';elementsArray[1][30]='0';
elementsArray[2]=new Array(30);elementsArray[2][0]='none';elementsArray[2][1]='0';elementsArray[2][2]='0';elementsArray[2][3]='0';elementsArray[2][4]='0';elementsArray[2][5]='0';elementsArray[2][6]='0';elementsArray[2][7]='0';elementsArray[2][8]='0';elementsArray[2][9]='0';elementsArray[2][10]='0';elementsArray[2][11]='0';elementsArray[2][12]='0';elementsArray[2][13]='0';elementsArray[2][14]='0';elementsArray[2][15]='0';elementsArray[2][16]='0';elementsArray[2][17]='0';elementsArray[2][18]='0';elementsArray[2][19]='0';elementsArray[2][20]='0';elementsArray[2][21]='0';elementsArray[2][22]='0';elementsArray[2][23]='0';elementsArray[2][24]='0';elementsArray[2][25]='0';elementsArray[2][26]='0';elementsArray[2][27]='0';elementsArray[2][28]='0';elementsArray[2][29]='0';elementsArray[2][30]='0';

Allerdings funktioniert es immer noch nicht...

Ich habe mit der Google Chrome Konsole übrigens nochmal den Array aufgerufen, falls es weiterhilft:
Grafik

Danke schonmal für die Antwort.

LG

Edit: Ich glaube den Fehler gefunden zu haben.

elementsArray.splice(x, y, selectedElement);

Keine Ahnung was ich da geschrieben habe, sind aber völlig falsche Parameter...

Beitrag zuletzt geändert: 3.1.2012 18:24:04 von squid

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city