appendChild() aus array --> fehler
1 
molily
appendChild() aus array --> fehler
Hallo,
ich habe folgendes Problem, ich möchte aus einem array[][] ein Menue aufbauen, das durch document.appendChild(XY) die entsprechenden MenuePunkte einfügt, diese menuepkte öffnen wiederum weitere MenuePkte...
Die erste Reihe von Links zu erstellen ist kein Problem, aber die Übergabe des MenuePktes für das 2. Menue bekomme ich nciht hin.
Das beste Resultat war, dass die 2. Fkt 'Display()' den Wert übergeben bekommen hat, aber es wegen dem Array und der For-Schleife immer nur die letzte Zelle vom Array war, egal welchen Pkt man anklickt.
--> der index ist schon durchgelaufen bevor man auf die Menuepkte klickt... aber wie kann ich das beheben?
kleine skizze:
land1
land2 --> |bau
land3 |wirtschaft
|kultur
Vielen Dank in vorraus....
Daniel
<html><head><title>Test</title>
<script type="text/javascript">
<!--
// die erste Menueliste wird erstellt:
function dat () {
surce = "land1; bau; 3; wirtschaft; 1; kultur; 2;#" +
"land2; bau; 1; wirtschaft; 2; kultur; 2;#" +
"land3; bau; 0; wirtschaft; 2; kultur; 1;#";
//teilt variable surce in ein 2-Dim Array....
surce = surce.split("#");
for(i = 0; i < surce.length; i++){
surce[i] = surce[i].split(";");
// alert(i + ": " + surce[i][0] + ": " + surce[i][1]);
}
//erste Menueliste wird aufgebaut...
for(i=0; i < surce.length -1; i++){
link = document.createElement("a");
// var link2 = document.createTextNode("display(surce[i][0])");
// link.setAttribute("href", surce[i][0]);
// alert(surce[i][0]);
link.setAttribute("onclick", "display(surce[i][0])");
link.appendChild(document.createTextNode(surce[i][0]));
document.getElementsByTagName('div')[0].appendChild(link);
document.getElementsByTagName('div')[0].appendChild(document.createElement("br"));
}
}
function display(dat){
alert(dat);
// ......hier sollte dann das 2. Menue definiert werden, wenn die Übergabe // funktionieren würde. aehnlich wie unter dat()
}
-->
</script>
</head>
<body onload="dat()">
<a onclick="display('test')">ajde</a>
<div id="d" style="position: absolute; left: 300px; top: 120px; visibility: visible; border-style:solid;">test<br><br></div>
</body></html>
-
for(i=0; i < surce.length -1; i++){
Hier solltest du eine lokale Variable verwenden.
link.setAttribute("onclick", "display(surce[i][0])");
Zum einen wird das mit setAttribute nicht browserübergreifend funktionieren, stattdessen solltest du das traditionelle Registrieren von Event-Handler verwenden.
Zum anderen wird dieser Aufruf nicht das gewünschte Resultat haben, weil sich Wert der die Variable »i« zum Zeitpunkt des Ausführens von display(surce[i][0]) geändert hat seit der onclick-Zuweisung - denn die Zählschleife, die die a-Elemente erzeugt und ihnen ein onclick verpasst, ist längst durchgelaufen.
Du musst also das jeweilige a-Element mit dem zugehörigen Array verknüpfen. Das geht etwa, indem du den Array in einer Eigenschaft am Elementobjekt speicherst:
link.submenu = surce[i];
Das Registrieren des Event-Handlers kann dann so aussehen:
link.onclick = display;
In der Handlerfunktion greifst du über this auf das geklickte Element und dessen Eigenschaft zu (Zugriff auf das verarbeitende Element):
function display () {
alert(this.submenu);
}(Ein aussagekräftigerer Funktionsname wäre ratsam...)
document.getElementsByTagName('div')[0].appendChild(link);
document.getElementsByTagName('div')[0].appendChild(document.createElement("br"));Du brauchst das »document.getElementsByTagName('div')[0]« nicht zweimal wiederholen.
Am besten arbeitest du hier mit document.getElementById:var menü = document.getElementById('menü');
menü.appendChild(link);
menü.appendChild(document.createElement('br'));Besser wäre hier die Verwendung von <ol id="menü"><li><a>...</a></li>...</ol> anstatt <div id="menü"><a>...</a><br>...</div>.
function display(dat){
alert(dat);
// ......hier sollte dann das 2. Menue definiert werden, wenn die Übergabe // funktionieren würde. aehnlich wie unter dat()
}Ich verstehe noch nicht ganz, warum das Untermenü erst beim Klicken zusammengebaut werden soll. Im DOM erzeugen solltest du es schon am Anfang, beim Klick nur einblenden. (Allerdings solltest du das Menü sowieso auch ohne JavaScript zugänglich machen.)
<body onload="dat()">
Das onload-Attribut kannst du hier weglassen, verwende
window.onload = dat;
in deinem JavaScript.Mathias