JavaScript Frage zur Vereinfachung einer Funktion

[dammi]

Hallo Leute,

habe eine Funktion geschrieben, die in einer HTML Datei per CSS einen Textbereich einblendet und wieder ausblendet.

<script language="JavaScript" type="text/javascript">
<!--
	function einblenden(div) {
		
		if(div == "ebene1"){
		
			with(document.getElementById("ebene1").style){
			if(display=="none"){
				display="inline";
				if(document.getElementById("ebene2").style.display == "inline"){
					document.getElementById("ebene2").style.display = "none";
				}
				if(document.getElementById("ebene3").style.display == "inline"){
					document.getElementById("ebene3").style.display = "none";
				}
				if(document.getElementById("ebene4").style.display == "inline"){
					document.getElementById("ebene4").style.display = "none";
				}
			}
			else {
				display="none";
			}

			}
		}
		
		if(div == "ebene2"){
		
			with(document.getElementById("ebene2").style){
			if(display=="none"){
				display="inline";
				if(document.getElementById("ebene1").style.display == "inline"){
					document.getElementById("ebene1").style.display = "none";
				}
				if(document.getElementById("ebene3").style.display == "inline"){
					document.getElementById("ebene3").style.display = "none";
				}
				if(document.getElementById("ebene4").style.display == "inline"){
					document.getElementById("ebene4").style.display = "none";
				}
			}
			else {
				display="none";
			}

			}
		}
		
		if(div == "ebene3"){
		
			with(document.getElementById("ebene3").style){
			if(display=="none"){
				display="inline";
				if(document.getElementById("ebene2").style.display == "inline"){
					document.getElementById("ebene2").style.display = "none";
				}
				if(document.getElementById("ebene1").style.display == "inline"){
					document.getElementById("ebene1").style.display = "none";
				}
				if(document.getElementById("ebene4").style.display == "inline"){
					document.getElementById("ebene4").style.display = "none";
				}
			}
			else {
				display="none";
			}

			}
		}
		
		if(div == "ebene4"){
		
			with(document.getElementById("ebene4").style){
			if(display=="none"){
				display="inline";
				if(document.getElementById("ebene2").style.display == "inline"){
					document.getElementById("ebene2").style.display = "none";
				}
				if(document.getElementById("ebene3").style.display == "inline"){
					document.getElementById("ebene3").style.display = "none";
				}
				if(document.getElementById("ebene1").style.display == "inline"){
					document.getElementById("ebene1").style.display = "none";
				}
			}
			else {
				display="none";
			}

			}
		}
	}

Wie man sehen kann ist diese Lösung hässlich lang.
Deswegen wollte ich den Code kürzen und habe es so probiert, was leider nicht klappt:

<script language="JavaScript" type="text/javascript">
<!--
	function einblenden(div) {
		var lvl = new Array ("ebene1", "ebene2", "ebene3", "ebene4");
		var	item = document.getElementById(lvl[i]);

		with(document.getElementById(div).style) {
		if(display=="none"){
			display = "inline";
			
			for (int i=0; i <= 3; i++) {
				if (item.style.display == "inline"){
					if (lvl[i] == div) {
					}
					if (lvl[i] != div){
						item.style.display = "none";
					}
				}
			}

		else {
			display="none";
		}
		}
		}
	}

//-->
</script>

Kann mir jemand sagen wo im zweiten Codebeispiel der Fehler liegt !?
Hab mal alert('dfdf'); am Anfang der Funktion eingesetzt, aber selbst das wird nicht ausgelöst. Und ich versteh nicht warum er jetzt nichtmehr in die Funktion springt!


Greetz

 

[XunnD]

Was mir mal sofort auffällt:

	function einblenden(div) {
		var lvl = new Array ("ebene1", "ebene2", "ebene3", "ebene4");
		var	item = document.getElementById(lvl[i]);

Zugriff auf i (undefinierter Wert) - demnach item auch undefiniert.

Und weiter unten, ohne nochmal item zuzuweisen, dann der Zugriff:

				if (item.style.display == "inline"){

 

[dammi]

Ok, hab mal i jetzt vor dem item deklariert.

Das Problem ist aber, unabhängig vom Code, dass überhaupt nicht in die Funktion reingesprungen wird.
Und das verstehe ich nicht.

Sprich wenn ich vor die Deklarationen einen Alert(''); setze, kommt dieser nicht beim klick auf die entsprechenden Felder in der HTML Datei.

Hast du dazu noch eine Idee ?

 

[XunnD]

Wo steht das JavaScript im HTML-Code (ja, das ist ausschlaggebend, wenn HTML Strict als DOCTYPE definiert wurde)?

Wie wird die Funktion aufgerufen?

 

[dammi]

Es steht gleich am Anfang im Meta, wie auch der obige Code der funktioniert, sprich:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
			<title>xxx</title> 
		
			<script language="JavaScript" type="text/javascript">
			<!--

Wenn das falsch wäre, dürfte doch auch der erste Javascript Code nicht ausgeführt werden, oder täusche ich mich ?

Aufgerufen wird die Funktion über ein 'onClick'

<a href="#" onClick="einblenden('ebene1'); return false;"> 
					<b> Text zum aufklappen</b>  <a href="Aufklapptext.pdf" target="_blank"> <img src="pdf.jpg" border="0"> </a> </a> 
		
				<div id="ebene1" style="display:none;">
                                       Aufklapptext
                                </div>

Ergänzung (10. Juli 2009)

Okay hab den Fehler, kann geclosed werden.

Das Problem war immernoch das am Anfang deklarierte 'i' bzw. das item. Bis dahin ging das Skript und keinen Millimeter weiter.
Hab jetzt die 2 Deklarationen rausgenommen und jetzt funktionierts.

Danke nochmal für die Hilfe XunnD