Mit Javascript CSS ändern <- Problem mit Variablenübergabe

[Jennesta]

Hallo,
ansich ist, das ändern von CSS-Werten mit Javascript ja ganz easy, aber irgendwie bin ich auf ein problem gestoßen, bei dem ich nichtmehr weiter weiß und auch über Google nicht weiterkomme.

Ich habe ein Bild und wenn ich auf dieses klicke, soll unter diesem Bild ein div-container ein und ausgeblendet werden. Da ich aber mehrere dieser Container habe, möchte ich nicht für alle eigene Funktionen schreiben, sondern der Funktion einen Parameter übergeben, der der id des HTML-Elements entspricht.
Aber wenn ich das auf folgende Weise übergebe, dann passiert nichts, oder mir wird vorgeworfen ich würde kein Objekt übergeben.

function show_navi(id) {
	if(document.getElementById(id).style. display == "none") {
		document.getElementById(id).style.display = "block";
	}
	if(document.getElementById(id).style. display == "block") {
		document.getElementById(id).style.display = "none";
	}
}

echo "	<img src='images/page/navi_cross.jpg' class='small_column_navi_title_image' onClick='javascript:show_navi(\"navi_tut_block_html\");'>\n";

Ich wäre sehr glücklich, wenn mir jemand bei diesem Problem auf die Sprünge helfen kann, oder mir vielleicht eine andere Lösung des Problems geben kann.

mfg Jennesta

 

[Sven Mintel]

Moin,

das nichts passiert liegt daran, dass keiner der beiden Fälle zutrifft, denn CSS-Eigenschaften erkennt JS nur, wenn sie mit JS gesetzt wurden oder direkt im Element notiert werden.

Lösung:

function show_navi(id) 
{
  document.getElementById(id).style.display =
    (document.getElementById(id).style.display=='block')
      ?'none'
      :'block'
}

...es wird nur abgefragt, ob das Element sichtbar ist...falls dies nicht zutrifft, wird angenommen, dass es versteckt ist und es wird angezeigt.

Was das fehlende Objekt betrifft, dazu kann man anhand des Codes nichts sagen.

Für eine andere, evtl. noch einfachere Lösung, welche ohne Übergabe von Parametern zurecht kommt, müsste man den Codeausschnitt mit dem Bild und dem Container dazu sehen.

 

[Jennesta]

Vielen Dank für die Lösung. Ich dachte z.B. immer, dass der Fehler in der Art der Übergabe liegt, weil manchmal kam schon nichts, wenn man die Sachen, die man übergeben will nicht in Anführungszeichen setzt.

Also da es klappt (und für meine Verhältnisse diese Lösung doch recht elegant) ist nerve ich dich nichtmehr mit den Containern
Wenigstens weiß ich nun auch woran es lag.

Nochmal Danke.

 

[Jennesta]

Kannst du mir vielleicht noch weiterführend sagen, warum folgendes nicht Funktioniert?

document.getElementById('img_'+id).src = (document.getElementById('img_'+id).src == 'images/page/navi_minus.jpg') ? 'images/page/navi_cross.jpg' : 'images/page/navi_minus.jpg';

also das mit 'img_'+id funktioniert wunderbar, das habe ich gesondert geprüft.
diese variante funktioniert auch, aber nur genau einmal. also wird das bild (cross.jpg) genau einmal getauscht in (minus.jpg), aber dann funktioniert das nicht mehr.
pfade usw stimmen auch.

 

[Sven Mintel]

Lasse dir mal testhalber die src ausgeben...du wirst sehen, dass dort nicht nur

images/page/navi_minus.jpg

oder ähnliches drinnen steht, sondern der komplette Pfad.

Dies kann allerdings von Browser zu Browser variieren...um dies zu umgehen, prüfe stattdessen per match(), ob das Ende des Pfades übereinstimmt.

 

[Jennesta]

Vielen Dank. Die Lösung war wieder genauso simpel. Mit der absoluten Pfadangabe klappts nun wunderbar zumindest im IE. Falls es Probleme in anderen Browsern geben sollte versuche ich es mit match().
Ich finde es zwar blöd, weil ich so evtl die Pfadangaben immer ändern muss, wenn ich mal die Datein verschiebe, aber das ist ja erstmal egal.