Zugriff auf mehrdimensionale Arrays [js]

tepsch

Guten Tag!
Ich habe ein Skript gebastelt, das ein Array erzeugt, wo jeweils ein Objekt eingeschrieben ist. Die Frage ist gleich im Quelltext. Würde mich riesig über Antworten freuen - ich komm nicht weiter!

(ist natürlich javascript und nicht php)

PHP

function create_spielfeld (max_x,max_y)
{


    var spielfeld = [];
    for(var i = 0; i < max_x; i++)
        {
            spielfeld[i] =  [];    
        for(var j=0; j < max_y; j++)
            {
            spielfeld[i][j] = {}; 
            spielfeld[i][j].art = "kA";
            }
        }
} 


function eingabe()
{
var x_wert = prompt("geb ausdehnung in x Richtung an!", "");
var y_wert = prompt("geb ausdehnung in y Richtung an!", "");
create_spielfeld(x_wert,y_wert);
}


function ausgabe()
{
// wie sollte hier "var ausgabe" aussehen, 
// damit ich auf den wert des arrays mit index 1, objekt 3 und eigenschaft art 
// zugreifen kann. also in der ausgabe "kA" erhalte?
var ausgabe = spielfeld[1][3].art;
alert(ausgabe);
}

Alles anzeigen

synaptic

wie sieht denn dein objekt aus was du da reinstopfst? is des nur der kA-string?

gib ma den gesamten quelltext der seite

tepsch

Hallo!
Es handelt sich hierbei eher um eine Testfunktion, sobald ich das sauber am laufen habe, werde ich sehen, wie sich diese in das Projekt integrieren lässt.

Das Objekt würde in der Umsetzung mehrere Eigenschaften und ev. auch Methoden zugeordnet erhalten.
zb:

objekt.art = "könig"
objekt.userid = "1"
objekt.move = move();

function move()
{
[Anweisung]
}

Wenn ich es allerdings nicht zu stande kriege, einen einfachen string aus der Array-Objekt-Struktur zu holen, bringt es mir nicht viel, den Kopf über mehr Anweisungen zu zerbrechen.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head><body>
<script type="text/javascript">


function create_spielfeld (max_x,max_y)
{


    var spielfeld = [];
    for(var i = 0; i < max_x; i++)
        {
            spielfeld[i] =  [];    
        for(var j=0; j < max_y; j++)
            {
            spielfeld[i][j] = {}; // Hier wilst du kein Array, sondern ein Object
            spielfeld[i][j].art = "kA";
            alert("spielfeld "+i+j+" erschaffen");
            }
        }
} 


function ausgabe()
{
// wie sollte hier "var ausgabe" aussehen, 
// damit ich auf den wert des arrays mit index 1, objekt 3 und eigenschaft art 
// zugreifen kann. also in der ausgabe "kA" erhalte?
var ausgabe = spielfeld[1][3].art;
alert(ausgabe);
}  


function eingabe()
{
var x_wert = prompt("geb ausdehnung in x Richtung an!", "");
var y_wert = prompt("geb ausdehnung in y Richtung an!", "");
create_spielfeld(x_wert,y_wert);
}


</script>
<h3 onclick="eingabe()">spielfeld</h3>
<h3 onclick="ausgabe()">0302</h3>
</body>
</html>

Alles anzeigen

synaptic

ok dann mach doch einfach mal die variable spielfeld global, denn deine zweite funktion kennt dein spielfeld nicht und ergo kann dort nichts rausgeholt werden
deklariere und initialisiere spielfeld bevor du deine funkionen schreibst, dann klappts auch mitm string

edit: hab mal etwas weitergebastelt..
so haste immer nen quadratisches spielfeld- mit den werten muste halt ma spielen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
.einzelfeld{
width:20px;
height:20px;
border:1px solid black;
border:collapse;
float:left;
}
#fieldwrap{
    border:1px solid red;
    overflow:hidden;
}
</style>
</head><body>
<script type="text/javascript">
var spielfeld = new Array();
function create_spielfeld (max_x,max_y)
{
var feld =  document.getElementById("fieldwrap");

    for(var i = 0; i < max_x; i++)
        {
            spielfeld[i] =  [];    
        for(var j=0; j < max_y; j++)
            {
            spielfeld[i][j] = {}; // Hier wilst du kein Array, sondern ein Object
            spielfeld[i][j].art = "kA";
            feld.innerHTML += "<div class=\"einzelfeld\" onclick=\"alert(this.id);\" id=\"feld"+[i]+""+[j]+"\"></div>";

            }
        }
} 


function ausgabe()
{
// wie sollte hier "var ausgabe" aussehen, 
// damit ich auf den wert des arrays mit index 1, objekt 3 und eigenschaft art 
// zugreifen kann. also in der ausgabe "kA" erhalte?
var ausgabe = spielfeld[1][3].art;
alert(ausgabe);
}  


function eingabe()
{
var x_wert = prompt("geb ausdehnung in x Richtung an!", "");
var y_wert = prompt("geb ausdehnung in y Richtung an!", "");
create_spielfeld(x_wert,y_wert);
document.getElementById("fieldwrap").style.width= x_wert*22+"px";
}


</script>
<h3 onclick="eingabe()">spielfeld</h3>
<h3 onclick="ausgabe()">0302</h3>
<div id="fieldwrap">


</div>
</body>
</html>

Alles anzeigen

tepsch

Oho!! Ist ja mal genial. viieeeelen herzlichen Dank!

synaptic

jo kein ding

tepsch

Doch, das ist ein Ding! =) Man darf auch mal sagen, dass hier einige Leute (wie ich) echt aufgeschmissen wären, wenn sich nicht andere (wie du) einen solchen Effort zeigen würden!

Ich habe nun alles nachvollziehen können, was du gemacht hast! Allerdings ist die Anordnung derzeit abhängig von ihrer Position in der Schleife, wo sie erschaffen werden. Die Schleife nimmt immer ein x und setzt so viele y daran wie angewiesen.

Hier ist hat sich ein kleiner Fehler eingeschlichen. Damit die Felder am Schluss geordnet auftauchen braucht man zum bestimmen der Breite des fieldwrap's den y_wert!

Wenns dich wundernimmt, habe ich die Version, wo meine Kommentare drin stehen, unten angehängt. Die kommentare haben mir geholfen, zu verstehen was du gemacht hast.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
.einzelfeld{
width:40px;
height:40px;
border:1px solid black;
border:collapse;
float:left;
}
#fieldwrap{
    border:1px solid red;
    overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
// spielfeld als array einführen
var spielfeld = new Array();
// spielfeld mit max ausdehnung erzeugen
function create_spielfeld (max_x,max_y)
{
// HTMLDivElement aus dem HTML holen, da soll später das feld erzeugt werden.
var feld =  document.getElementById("fieldwrap");


    for(var i = 0; i < max_x; i++)
        {
            // für alle felder in x-Richtung einen Subarray, die zweite Dimension zum Array spielfeld erzeugen.
            spielfeld[i] =  [];

        for(var j=0; j < max_y; j++)
            {
            // für alle felder in y-richtung ein Subobjekt zum 2-dimensionalen Array anlegen.
            spielfeld[i][j] = {};
            // dieses UnterObjekt spezifizieren.
            spielfeld[i][j].x = i;
            spielfeld[i][j].y = j;
            spielfeld[i][j].art = "kA";

            // im HTML-Objekt mit der id fieldwrap ein spielfeld erzeugen
            feld.innerHTML += "<div class=\"einzelfeld\"  onClick=\"ausgabe("+[i]+","+[j]+");\" id=\"feld"+[i]+""+[j]+"\"><h6>feld"+[i]+""+[j]+"</h6></div>";

            // Wie sieht struktur von fieldwrap aus? bei max_x=3, max_y=2

            // <div id="fieldwrap">
            //        <div id="feld00" class="einzelfeld"></div>        beinhaltet spielfeld[0][0].art
            //        <div id="feld01" class="einzelfeld"></div>        beinhaltet spielfeld[0][1].art
            //        <div id="feld10" class="einzelfeld"></div>        beinhaltet spielfeld[1][0].art
            //        <div id="feld11" class="einzelfeld"></div>        beinhaltet spielfeld[1][1].art
            //        <div id="feld20" class="einzelfeld"></div>        beinhaltet spielfeld[2][0].art
            //        <div id="feld21" class="einzelfeld"></div>        beinhaltet spielfeld[2][1].art
            // </div>

            }
        }
}


function ausgabe(x_wertung, y_wertung)
{
var x = spielfeld[x_wertung][y_wertung].x;
var y = spielfeld[x_wertung][y_wertung].y;
var z = spielfeld[x_wertung][y_wertung].art;
var ausgabe = "Dieses Feld befindet sich bei x:"+x+" und y:"+y+" und hält den Wert:"+z+"";
alert(ausgabe);
}  


function eingabe()
{
var x_wert = prompt("geb ausdehnung in x Richtung an!", "");
var y_wert = prompt("geb ausdehnung in y Richtung an!", "");
create_spielfeld(x_wert,y_wert);
// das Element fieldwrap wird in Breite festgelegt
document.getElementById("fieldwrap").style.width= y_wert*42+"px";
}


</script>
<h3 onclick="eingabe()">spielfeld</h3>
<div id="fieldwrap">


</div>
</body>
</html>

Alles anzeigen

synaptic

jo das mit dem fehler leuchtet ein, ich hatte für x und y immer die gleichen werte genommen..^^
habs halt dereinfachheit halber so gemacht.
aber schön, dir eine grundlage gegebenzu haben

tepsch

Ich bin kräftig am weiterbasteln. =) Gibt es eine Möglichkeit, den Eventhandler onmouseover so einzustellen, dass er immer nach x sekunden eine funktion auslöst, ohne mit der maus erneu in den aktionsbereich des elements gehen zu müssen?

synaptic

müsste mit nem timer gehen
timer = setTimeout("funktionsname", zeitrauminMillisekunden)

und in der besagten funktion sagste dann
clearTimeout(timer)
am ende

tepsch

danke! brainlag zu später stunde. oder einfach mit einem onmouseout die funktion stoppen...

läuft mit deiner variante weitaus sauberer...! (war ja absehbar) =)

synaptic

jo is ja kein ding...
dafür sind wir ja hier

Tags