Hilfe bei Fehlersuche im script/ dropdownMenu

as140 · 05.01.2010

Hallo Gemeinde,

ich hab hier ein - noch sehr einfaches- html File mit JavaScript,ein dropdown Menu.
Nun zeigt mir Mozilla aber den 2 Untermenupunkt von 'lessons'(l2) nicht an. Eigendlich sollte dort noch ein Untermenupunkt 'Aufbau' (l2k) erscheinen, das tut er aber nicht. Das erstaunliche: Ich habe im 3. Menupunkt( l3) 3 Untermenupunkte( l3i,l3j,l3k) und die werden sauber angezeigt. Ich find den Fehler nicht. Kann bitte mal jemand drüber schauen? denn ich schau schon seit Stunden und seh irgendwie nix mehr...
D
Hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
.menue {
background : url(vita.jpg) no-repeat;
color : #333;
font-weight : bold;
font-size : 14px;
width : 100px;
height : 25px;
aline: center;
text-align: center;
}
.submenue {
background :url(Vita_sub.jpg)no-repeat;
color : #FFF;
font-weight : bold;
font-size : 12px;
width : 100px;
height : 25px;
visibility:hidden;
text-align: center;
}

#l1 {
position : absolute;
left : 10px;
top: 10px;
}
#l1i {
position : absolute;
left : 10px;
top: 33px;
width : 100px;
}
#l2 {
position : absolute;
left : 110px;
top: 10px;
}

#l2i {
position : absolute;
left : 110px;
top: 33px;
width : 100px;
}
#l2k {
position : absolute;
left : 110px;
top: 53px;
width : 100px;
}
#l3 {
position : absolute;
left : 210px;
top: 10px;
}
#l3i {
position : absolute;
left : 210px;
top: 33px;
width : 100px;
}
#l3k {
position : absolute;
left : 210px;
top: 53px;
width : 100px;
}
#l3j {
position : absolute;
left : 210px;
top: 78px;
width : 100px;
}

#l4 {
position : absolute;
left : 310px;
top: 10px;
}

#l4i {
position : absolute;
left : 310px;
top: 33px;
width : 100px;
}#l5 {
position : absolute;
left : 410px;
top: 10px;
}
#l5i {
position : absolute;
left : 410px;
top: 33px;
width : 100px;
}
#l6 {
position : absolute;
left :510px;
top: 10px;
}

#l6i {
position : absolute;
left : 510px;
top: 33px;
width : 100px;
}
</style>
<script language="JavaScript">
function aufzu(link) {
if(document.getElementById((link + "z")).innerHTML != "-") {
document.getElementById((link + "z")).innerHTML = "-";
document.getElementById((link + "i")).style.visibility = "visible";
document.getElementById((link + "j")).style.visibility = "visible";
document.getElementById((link + "k")).style.visibility = "visible";
document.getElementById(link ).style.color = "black";
}
else {
document.getElementById((link + "z")).innerHTML = "+";
document.getElementById((link + "i")).style.visibility = "hidden";
document.getElementById((link + "k")).style.visibility = "hidden";
document.getElementById((link + "j")).style.visibility = "hidden";
document.getElementById(link ).style.color = "darkgrey";
}
}
</script>
<body>
<span id="l1z" style="visibility:hidden;">+</span>
<span onMouseOver="aufzu('l1')" onMouseOut="aufzu('l1')">
<div class="menue" id="l1">Vita</div>
<div id="l1i" class="submenue"><a href='vita.html'>Vita</a></div>
</span>

<span id="l2z" style="visibility:hidden;">+</span>
<span onMouseOver="aufzu('l2')" onMouseOut="aufzu('l2')">
<div class="menue" id="l2" >Lessons</div>
<div id="l2i" class="submenue">
<a href='nubs.html'>Anfänger</a></div>
<div id="l2k" class="submenue">
<a href='runaways.html'>Aufbau</a></div>
</span>

<span id="l3z" style="visibility:hidden;">+</span>
<span onMouseOver="aufzu('l3')" onMouseOut="aufzu('l3')">
<div class="menue" id="l3" >Choere</div>
<div id="l3i" class="submenue">
<a href='young.html'>Young Harmony</a></div>
<div id="l3k" class="submenue">
<a href='chor2.html'>Chor 2</a></div>
<div id="l3j" class="submenue">
<a href='Chor3.html'>Chor 3</a></div>
</span>

<span id="l4z" style="visibility:hidden;">+</span>
<span onMouseOver="aufzu('l4')" onMouseOut="aufzu('l4')">
<div class="menue" id="l4" >Kontakt</div>
<div id="l4i" class="submenue">
<a href='email.html'>email</a></div>
</span>

<span id="l5z" style="visibility:hidden;">+</span>
<span onMouseOver="aufzu('l5')" onMouseOut="aufzu('l5')">
<div class="menue" id="l5" >Kalender</div>
<div id="l5i" class="submenue">
<a href='kalender.html'>Kalender</a></div>
</span>

<span id="l6z" style="visibility:hidden;">+</span>
<span onMouseOver="aufzu('l6')" onMouseOut="aufzu('l6')">
<div class="menue" id="l6" >Impressum</div>
<div id="l6i" class="submenue">
<a href='impressum.html'>Impressum</a></div>
</span>

</body>

</html>

Danke!

Chriss1987 · 05.01.2010

AW: Hilfe bei Fehlersuche im script/ dropdownMenu

Hi,

erstmal:
HTML bitte in die entsprechenden Tags packen: [html ] [/html ] (jeweils ohne Leerzeichen vor der schließenden Klammer)!

Wenn ich mir die Seite im Firefox anschaue, zeigt er mir in der FEhlerkonsole jede Menge Fehler vom Format:

Code:

Fehler: document.getElementById(link + "k") is null
Quelldatei: 05.10.2010.html
Zeile: 128

(und noch mehr Zeilen und nicht nur mit k...)

Wenn du die Fehler behoben hast, wirst du auch feststellen, dass das Menü wieder richtig angezeigt wird, da die Scriptverarbeitung nach dem ersten Fehler abbricht...

Schöne Grüße aus dem Sauerland!
Chriss

Edit: *Gedankenanstoß* Prüfen, ob die Elemente existieren...

as140 · 05.01.2010

AW: Hilfe bei Fehlersuche im script/ dropdownMenu

Danke für die hilfreiche Antwort - Du hast mich echt auf die Spur gebracht - bei solchen Beiträgen lernt man so unendlich viel.

Ebenfalls schöne Grüße -jedoch nicht uas dem Sauerland