Texte oder Elemente bei bestimmten Aktionen anzeigen lassen

[Mathias Brodala]

Hallo Hendrik.

Vorab: ich setze voraus, dass alle folgenden Schritten äquivalent noch einmal serverseitig umgesetzt wurden, um auch Nutzern ohne JS die gleiche Funktionalität zu bieten.

Beispiel: Falls jemand auf den Radiobutton "ich besitze ein Auto!" klickt, sollen alle anderen Formularfelder zur genaueren Angabe des Autos erscheinen.

Wie kann ich das realisieren?

Mein Vorschlag sähe wie folgt aus: <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=beim Laden>¹ des Dokumentes http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=generierst du das einzublendende Formular, verpasst ihm eine aussagekräftige Klasse² a lá „hidden“ und http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=fügst es an die gewünschte Stelle im Dokumentenbaum ein. Des weiteren solltest du dem Formular noch eine brauchbare ID vergeben, um dir später den Zugriff darauf zu vereinfachen.

Besagte Klasse kannst du nun in deinem Stylesheet so formatieren, dass alle Elemente, die dieser angehören, unsichtbar sind. Über die ID kannst du hier auch schon vorsorgliche Formatierungen (z. B. absolute Positionierung, damit das Formular folgende Elemente nicht verschiebt) vornehmen.

Beim Klick auf die jeweilige Radiobox kannst du nun <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=über genannte ID auf das Formular zugreifen> und dessen Klasse löschen (einfach auf "" setzen). Damit gelten die ausblendenten Formatierungen nicht mehr und das Formular wird sichtbar.

Ich habe mir mal das mit innerHTML gedacht. Allerdings habe ich da das Problem, dass das wohl (berichtigt mich, wenn es euch anders geht) nur im IE geht?!

Nein, praktisch jeder nennenswerte Browser versteht innerHTML.

Einen schönen Mittwoch noch.

Gruß, Mathias

¹ Möglichst wie folgt:

window.onload = function() {  
  
  /* Weiterer Code */  
};

² Beachte, HTML: „class“, JS: „className“