Texte oder Elemente bei bestimmten Aktionen anzeigen lassen

[Hendrik]

Hey!

Ich bin noch totaler Neuling in Javascript und frage mich, wie ich es (in allen Browsern) hinkriege, nachdem etwas bestimmtes geschieht, einen Text oder ein Formularfeld erscheinen zu lassen. 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?

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?!
Wie kann ich das anders realisieren? Wie wird es funktionieren? Bei anderen geht das doch auch ;-)

Danke im Voraus für eure Antworten!

Hendrik

[globe]

n'abend,

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?!

da liegst du falsch.

Wie kann ich das anders realisieren? Wie wird es funktionieren? Bei anderen geht das doch auch ;-)

Du könntest beispielsweise alle Möglichen "Unterformularelemente" (mittels eines <div>s gruppiert) ins Formular einfügen und mittels CSS verstecken (display:none;). Dem onclick-Handler des Radio-Buttons musst du dann entsprechend beibringen, wie er die gewünschte Gruppe (auto-details) findet (JS:getElementById und folgende) und anzeigt (CSS:display).

weiterhin schönen abend...

[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“

[_roro]

Hey!

Ich bin noch totaler Neuling in Javascript und frage mich, wie ich es (in allen Browsern) hinkriege, nachdem etwas bestimmtes geschieht, einen Text oder ein Formularfeld erscheinen zu lassen. Beispiel: Falls jemand auf den Radiobutton "ich besitze ein Auto!" klickt, sollen alle anderen Formularfelder zur genaueren Angabe des Autos erscheinen.

Mögliche Methode:
document.getElementById('absatz').style.display = 'none';
document.getElementById('absatz').style.display = 'yes';

... in eine eigene Funktion verpacken und anhand bestimmter Events aufrufen.

--roro

[Mathias Brodala]

Hallo _roro.

Mögliche Methode:
document.getElementById('absatz').style.display = 'none';

Blendet das Element mit der ID „absatz“ aus.

document.getElementById('absatz').style.display = 'yes';

Setzt den Wert der display-Eigenschaft oben genannten Elementes auf seinen Standardwert zurück, da „yes“ kein gültiger Wert besagter Eigenschaft ist.

Einen schönen Mittwoch noch.

Gruß, Mathias

[Hendrik]

Hey!

Mögliche Methode:
document.getElementById('absatz').style.display = 'none';
document.getElementById('absatz').style.display = 'yes';

... in eine eigene Funktion verpacken und anhand bestimmter Events aufrufen.

also ungefähr so?!:

  
  
<script type="text/javascript">  
        function change() {  
  
     if (document.getElementById('meinAbsatz').style.display == 'none') {  
  document.getElementById('meinAbsatz').style.display = 'yes';  
     }  
      if (document.getElementById('meinAbsatz').style.display == 'yes') {  
  document.getElementById('meinAbsatz').style.display = 'none';  
      }  
  
        }  
</script>  

  
<p id="meinAbsatz" style="display: yes;">Text</p>  
<a href="javascript:change();">Anderer Text</a>  

Leider funktioniert es nicht (liegt wohl an den if-Abfragen, da es ansonsten geht). Kann mir da jemand helfen?

Hendrik

[Hendrik]

Hey!

also ungefähr so?!:

<script type="text/javascript">
        function change() {

if (document.getElementById('meinAbsatz').style.display == 'none') {
  document.getElementById('meinAbsatz').style.display = 'yes';
     }
      if (document.getElementById('meinAbsatz').style.display == 'yes') {
  document.getElementById('meinAbsatz').style.display = 'none';
      }

}
</script>

> ~~~html
  

> <p id="meinAbsatz" style="display: yes;">Text</p>  
> <a href="javascript:change();">Anderer Text</a>  
> 

Leider funktioniert es nicht (liegt wohl an den if-Abfragen, da es ansonsten geht). Kann mir da jemand helfen?

Ah, danke Mathias! Daran lags wohl. Jetzt sieht es so aus und funktioniert auch:

  
<script type="text/javascript">  
        function change() {  
  
     if (document.getElementById('meinAbsatz').style.display == 'none') {  
  document.getElementById('meinAbsatz').style.display = 'block';  
     }  
      else if (document.getElementById('meinAbsatz').style.display == 'block') {  
  document.getElementById('meinAbsatz').style.display = 'none';  
      }  
  
        }  
</script>  

  
<p id="meinAbsatz" style="display: block;">Text</p>  
<a href="javascript:change();">Anderer Text</a>  

Allerdings funktioniert es nur, wenn ich explizit style="display: block;" angebe, ansonsten nicht! Wie krieg ich es hin, dass ich es nicht mehr hinschreiben muss?

Hendrik

[JürgenB]

Hallo Hendrik,

Allerdings funktioniert es nur, wenn ich explizit style="display: block;" angebe, ansonsten nicht! Wie krieg ich es hin, dass ich es nicht mehr hinschreiben muss?

lass mal das zweite if hinter dem else weg. Also:

if (....style.display == 'none') ....style.display = 'block';
else                             ....style.display = 'none';

Gruß, Jürgen