nicht angemeldet
Hallo zusammen,
ich versuche folgendes:
1. per onclick eine Liste erstellen, die aus einem Array generiert wird
2. wenn das Array an der Position [i] ein weiteres Array enthält, aus dem eine neue Liste erzeugt werden sollte, dann
3. soll beim erzeugen von 1. schon ein Linktag in dem Listenpunkt erzeugt werden, damit dann
4. beim Klick darauf die "alte" Liste wieder entfernt und die neue mit 1. erzeugt werden kann
Bisher funktioniert 1. :-) Bei 2. Hakt es am Verständnis von JS-Arrays. Wie bekomme ich hin, dass mein array level2 mit level1[0] assoziiert wird ohne den Inhalt zu überschreiben? 3. und 4. lasse ich erstmal außen vor, sonst wirds viell. zu umständlich. Hier mal der Code - ich hoffe das Vorhaben ist verständlich?!..
<!DOCTYPE html">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation "neu laden"</title>
<style type ="text/css">
<!--
html, body{
font-family:Arial, sans serif;
font-size:14px;
}
.clear{
clear:both;
}
a{
text-decoration:none;
}
ul#submenu{
list-style:none;
width:18em;
height:10em;
margin:0;
padding:0;
background:red;
}
ul#submenu li{
display:block;
border:1px solid black;
border-radius:5px;
margin:2px;
width:4em;
height:2em;
float:left;
}
-->
</style>
<script type="text/javascript">
var level1=new Array("lev1-1","lev1-2","lev1-3","lev1-4","lev1-5","lev1-6");
var level2=new Array("lev2-1","lev2-2","lev2-3","lev2-4","lev2-5","lev2-6","lev2-7","lev2-8","lev2-9");
//level1[0]=new Array("lev2-1","lev2-2","lev2-3","lev2-4","lev2-5","lev2-6","lev2-7","lev2-8","lev2-9");
//var level3=level1[0].concat(level2);
function generateNewList(node){
//Aktuelle Kategorie anzeigen, von der man gekommen ist
var shownLevel = node.firstChild.nodeValue;
var beginText = 0;
var lengthOfText = document.getElementById("shownLevel").firstChild.nodeValue.length;
document.getElementById("shownLevel").firstChild.replaceData(beginText, lengthOfText, shownLevel);
for (var i = 0; i < level1.length; i++) {
var newLi = document.createElement("li");
var newLiText = document.createTextNode(level1[i]);
document.getElementById("submenu").appendChild(newLi);
document.getElementsByTagName("li")[i].appendChild(newLiText);
//PSEUDO
if(level2.length>0){
/*wenn level2 (eigentlich level1[0]) .length>0, dann in dem erstellten LI einen Anker erstellen appendChild("a"),
der dann wiederum onclick generateNewList aufruft, um eine Liste aus Array Level2 in ul.submenü zu erstellen.*/
}
}
}
</script>
</head>
<body>
<header>
-----kopf-----
</header>
<h2><a id="shownLevel" onclick="generateNewList(this)">Test: generiere Liste</a></h2>
<ul id="submenu">
<!--dynamic list menu-->
</ul>
<div class="clear"></div>
<footer>
-----fuhuß-----
</footer>
</body>
</html>
Freu mich über Hinweise
Frohe Pfingsten