Linkinhalt per Klick ändern

[Kai345]

[latex]Mae  govannen![/latex]

OK. Jetzt der GETESTETE Code:

Ok, dann hier mal ein paar Anmerkungen und Verbesserungsvorschläge. Nicht weiter beachtet werden dabei die CSS-inline-styles und die Verwendung des style-objekts in JS statt einer Klassen-Lösung, darüber gibt es hier ach bereits genügend Postings

<a   id="L1" style="display:none"  href="javascript:ToggleTheElement('1')">öffnen</a>

href mit Label javascript: deutet darauf hin, daß hier oft nicht wirklich ein a-Element sinnvoll ist. Meist empfiehlt sich ein Button, den man per CSS auf Link stylen kann, wenn es denn so gewünscht ist. Falls doch: das komplette a-Element per JS erzeugen, da sonst bei bestimmten Ausgabegeräten, die nichts mit JS und CSS anfangen können, ein toter Link entsteht.

<input id="B1" type="button" value="öffnen" onclick="ToggleTheElement(1)" style="background-color:green; display:none">

Oben hast du den Parameter noch als Zeichenkette übergeben, nun als Zahl. Durch die automatische Typ-Umwandlung bei der Verkettung spielt das in diesem Fall keine Rolle, ist aber inkonsequent.

<!--

Sinnloses Relikt aus dem letzten Jahrtausend. Kann weggelassen werden.

function ToggleTheElement(str) {

Funktionsnamen werden nur mit großem Buchstaben begonnen, wenn sie einen Konstruktor darstellen.

if ('öffnen'==document.getElementById('L'+str).innerHTML) {

Es ist absolut nicht sinnvoll, nach dem aktuellen Inhalt des a-Elements zu selektieren. Ändert sich dieser, muß jedes mal das Javascript angepasst werden. Außerdem sind unterschiedliche Linktexte auf einer Seite nur durch Duplizieren und/oder Anpassen der Funktion möglich. Besser ist es, den aktuellen Anzeige-Zustand zu speichern (hier z.B. als boolschen Wert, da es nur zwei Zustände gibt) und für alle Elemente entweder in einem Array/Objekt vorzuhalten oder als Eigenschaft des jeweiligen Objekts anzuhängen (mag ich persönlich aber nicht)

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';

Wozu die ganzen document.getElementById?  Wenn du nicht vorhast, von den hier verwendeten Elementen welche zu entfernen/ersetzen, ist es unnötig, die Referenzen bei jedem Klick neu zu ermitteln. Das macht man ein Mal beim Laden der Seite und greift dann in der Funktion nur auf die schon vorhandenen Referenzen zu.

// onload:

Wo? Ich seh' nichts davon. Das funktioniert rein zufällig, weil das Script am Ende steht. Kopiert sich das jemand und bindet es woanders ein, werden die folgenden Elemente nicht gefunden. Du schreibst zwar in der Erklärung etwas dazu, aber da der Code ja angeblich selbsterklärend sein soll, muß man den Code auch ohne diese Erklärung bewerten.

document.getElementById('E1').style.display='none';
document.getElementById('L1').style.display='inline';
document.getElementById('B1').style.display='inline';

//-->

s.o.

Cü,

Kai