If/Else

[Nike]

Hallo liebe Leute

Wollte eben kurz ein Skript erstellen, welches mir beim Klick auf einen Link das anfangs unsichtbare (Display: None) Menu auf Display: Block stellt. Bei erneutem Klick soll das Menu wieder auf Display: None gestellt werden.

Folgendes Skript habe ich geschrieben... Eventhandler im Html-Code...

  
function klickmenu()  
{  
if (document.getElementById("menu1").style.display = "none")  
{  
	document.getElementById("menu1").style.display = "block";  
}	  
else  
{  
	document.getElementById("menu1").style.display = "none";  
}	  
}  

Leider funktioniert das ganze nicht wie gewünscht und ich finden den Denkfehler nicht...

Das Menu wird beim Klick ausgeklappt, aber beim erneuten Klick nicht wieder eingeklappt... (bzw. erst eingeklappt und dann wieder ausgeklappt (überprüft mit Alert))

Wo liegt das Problem?

Liebe Grüsse

Niek

[Gunnar Bittersmann]

@@Nike:

nuqneH

if (document.getElementById("menu1").style.display = "none")

Der erste Denkfehler ist, nicht zwischen http://de.selfhtml.org/javascript/sprache/operatoren.htm@title=Vergleichsoperator und Zuweisungsoperator zu unterscheiden.

{
document.getElementById("menu1").style.display = "block";
}

Der zweite Denkfehler ist, CSS-Eigenschaften mit JavaScript zu ändern.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Der zweite Denkfehler ist, CSS-Eigenschaften mit JavaScript zu ändern.

Ups, hab mich verzählt. Das war der nullte. ;-)

Stattdessen mit JavaScript eine Klasse hinzufügen bzw. entfernen.

Qapla'

[molily]

Hallo,

das anfangs unsichtbare (Display: None) Menu auf Display: Block stellt

if (document.getElementById("menu1").style.display == "none")

Mit .style.display kannst du den aktuellen Style nur dann auslesen, wenn er vorher mit Inline-Styles gesetzt wurde.

Wenn du eine solche CSS-Regel hast:

#menu1 { display: none; }

Dann ergibt document.getElementById("menu1").style.display einen leeren String ("").

Du müsstest Inline-Styles verwenden:

<div id="menu1" style="display: none">…</div>

Dann wäre .style.display initial nicht leer. Das ist aber nicht so schön, die Formatierung sollte letztlich schon im Stylesheet stehen.

Siehe auch: </archiv/2014/1/t216394/#m1483732>

Noch ein weiterer Grund, eine Klasse zur Markierung und zum Umschalten der Sichtbarkeit zu verwenden.

Mathias