nicht angemeldet
Moin!
Beschreibe doch lieber den Weg und erarbeite mit dem Fragenden zusammen eine Lösung anstatt immer wieder nur wenig bis kaum kommentierten und in diesem Fall nicht funktionierenden Code zu posten.
OK. Jetzt der GETESTETE Code:
<html>
<body>
<a id="L1" style="display:none" href="javascript:ToggleTheElement('1')">öffnen</a>
<input id="B1" type="button" value="öffnen" onclick="ToggleTheElement(1)" style="background-color:green; display:none">
<div id="E1" style="display:block; margin:2em; padding:2em; border:5px solid red">Irgendwas</div>
</body>
<script type="text/javascript">
<!--
~~~~~~javascript
function ToggleTheElement(str) {
if ('öffnen'==document.getElementById('L'+str).innerHTML) {
document.getElementById('E'+str).style.display = 'block';
document.getElementById('L'+str).innerHTML = 'schließen';
document.getElementById('B'+str).value = 'schließen';
document.getElementById('B'+str).style.backgroundColor='red';
} else {
document.getElementById('E'+str).style.display = 'none';
document.getElementById('L'+str).innerHTML = 'öffnen';
document.getElementById('B'+str).value = 'öffnen';
document.getElementById('B'+str).style.backgroundColor='green';
}
}
// onload:
document.getElementById('E1').style.display='none';
document.getElementById('L1').style.display='inline';
document.getElementById('B1').style.display='inline';
//-->
~~~~~~html
</script>
</html>
(Ich finde, der ist selbsterklärend - aber bitte:
Anfangs wird der Link "L1" (und der hinzugefügte Button "B1") verborgen, der Bereich "B1" angezeigt - das mag sinnvoll sein, wenn der Bereich bei angeschaltetem Javascript sichtbar sein soll.
Nach dem Laden stößt der Browser auf das Javascript und führt es aus (eventuell...). Deshalb wurde das Javascript auch hinter den Body gesetzt. Das spart das "onload" oder alternativ das Initialieren eines Even-Handlers und verkürzt und vereinfacht das Beispiel.
Es wird der Link "L1" und der Button "B1" angezeigt, indem die Stylesheet-Eigenschaft "display" auf "inline" gesetzt wird. Das nur bei Bedarf anzuzeigende Element wird verborgen, indem die Stylesheet-Eigenschaft "display" auf "block" gesetzt wird.
Klickt jetzt ein Benutzer auf den Link "L1" oder den Button "B1", dann wird die Funktion "ToggleTheElement" mit dem Parameter "1" aufgerufen, welcher innerhalb dieser Funktion in der Variable "str" gespeichert wird.
Die Funktion prüft den Inhalt ("innerHTML")des Elementes "L1". Wichtig ist hierbei, dass die ID des Elements richtig zusammengesetzt wird: 'E'+str ergibt den String "E1" - wenn die Variable, also das Funktionsargument "str" gleich 1 ist.
- Es könnte auch der Wert ("value") von "B1" in geprüft werden.)
- Es könnte auch der Wert in document.getElementById('E'+str).style.display geprüft werden. Dabei wäre aber wieder folgendes zu beachten: Hat man aber diesen nicht (wie im Beispiel mit style="display:block;" explizit gesetzt, so ist dieser u.U. leer und nicht wie erwartet: 'block'.
Je nach Prüfungsergebnis wird jetzt der Link mit einem neuen Text versehen(Eigenschaft "innerHTML" = 'schließen') und das Element E1 gezeigt (Eigenschaft "display" = 'block') Damit ist die Frage an sich beantwortet.
Um weitere Fragen zu vermeiden:
Der Button bekommt ebenfalls einen neuen Text (hier aber die Eigenschaft "value"!) und der Button erhält eine andere Hintergrund-Farbe. Dies wurde im Beispiel eingefügt, weil viele (mangels einer vernünftigen Dokumentation und zahlreicher "Fachbuch"-autoren die sich darum drücken) nicht wissen, dass man nicht einfach
"document.getElementById('B'+str).style.background-color='green';"
notieren kann. Denn der Interpreter (Browser) würde versuchen eine Subtraktion (Das Minus!) auszuführen, bei der hier mindestens die verwendete Variable 'color' unbesetzt, also auch leer ist:
document.getElementById('B'+str).style.background - color="red"; // geht also nicht.
Deshalb sind CSS-Eigenschaften, die ein Minus enthalten, wie folgt zu notieren: Das Minus-Zeichen ist zu entfernen, der nachfolgende Buchstabe groß zu schreiben.
Beispiele:
- background-color wird zu backgroundColor
- font-size zu fontSize
- z-index zu zIndex.
Lo!
Ich kann es besser - aber warum verbesserst Du es nicht, wenn Du es doch besser weißt?
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
JürgenB
Struppi