@@Sveno:
nuqneH
ich möchte wie oben zu sehen mit <option> und onclick ein Textfeld ausblenden, aber ich krieg es einfach nicht hin.
Im Firefox funktioniert’s. In Chrome nicht.
Stattdessen: Auf das change-Event des select-Elements reagieren und die Sichtbarkeit entsprechend seines value ändern. Dirty (nicht so machen!):
<select onchange="[code lang=javascript]document.getElementById('demo').style.display = (this.value == 'anzeigen') ? 'block' : 'none';
">
<option>anzeigen</option>
<option>verbergen</option>
</select>[/code]
Da gibt es einiges zu verbessern:
(1) Man sollte keinen JavaScript-Code ins HTML schreiben, sondern Eventhandler in JavaScript definieren.
Im HTML steht lediglich
<select id="visibility-switcher">
<option value="visible">anzeigen</option>
<option value="hidden">verbergen</option>
</select>
Im JavaScript:
var demoElement = document.getElementById("demo"),
visibilitySwitcherElement = document.getElementById("visibility-switcher");
visibilitySwitcherElement.addEventListener("change", function (event)
{
// dazu kommen wir gleich
}, false);
(2) Man sollte mit JavaScript keine CSS-Eigenschaften ändern, sondern Informationen ins DOM bringen.
Man könnte dem demo-Element z.B. den Wert des select-Elements als Klasse verpassen:
visibilitySwitcherElement.addEventListener("change", function (event)
{
demoElement.className = event.target.value;
}, false);
Den Rest erledigt das Stylesheet:
.hidden
{
display: none;
}
(3) Man sollte Elemente nicht unbedingt mit display: none verstecken.
Also die Regel für .hidden
doch etwas anders.
Qapla'
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)