nicht angemeldet
onclick "Sichtbar" will nicht
1 
Gunnar Bittersmann
0 Gunnar Bittersmann
1
onclick "Sichtbar" will nicht
Ah ich verzweifele noch an mir. Folgendes Script funktioniert in einer einzelnen Datei, nicht aber auf der Seite. Ist da ein Syntaxfehler?
<script type="text/javascript">
function sichtbar () {
document.all.DynText.style.visibility = "visible";
}
function unsichtbar () {
document.all.DynText.style.visibility = "hidden";
}
</script>
<select name="objekt" size="6" >
<option value="1"onclick="unsichtbar();">Orange</option>
<option value="2"onclick="unsichtbar();">Apfel</option>
<option value="3"onclick="unsichtbar();">Salami</option>
<option value="4" selected onclick="sichtbar();">Blutwurst</option>
<option value="5"onclick="unsichtbar();">Schinken</option>
<option value="6"onclick="unsichtbar();">Kartoffel</option>
</select><br />
<div id="DynText" style="visibility:hidden">
Anzahl<br />
<select name="anzahl" size="3" >
<option value="1" >Blutwurst ROH</option>
<option value="2" >Blutwurst NORMAL</option>
<option value="4" >Blutwurst EXTRABLUTIG</option>
</select>
</div>
-
@@E-mailausdrucker:
nuqneH
Ist da ein Syntaxfehler?
Ja, im Markup. Frag den Validator.
document.all.DynText.style.visibility = "visible";
document.allist Unsinn. War nie Standard und funktioniert nur in einigen Browsern. Verwendedocument.[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElementById()]!Noch besser ist es, du setzt die (Un-)Sichtbarkeit nicht mit JavaScript, sondern gibst bzw. nimmst dem betreffenden Element eine Klasse:
Nicht
….style.visibility = "visible";
sondern….className = "visible";Nicht
….style.visibility = "hidden";
sondern….className = "";Die Formatierung für diese steht im Stylesheet:
.js .visible { visibility: visible }Dazu erhält das 'html'-Element per JavaScript eine Klasse "js":
<script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";</script>[/code]Siehe Javascript mehrstufig zünden [PERFORMANCE-BP2]
<div id="DynText" style="visibility:hidden">
Das @style-Attribut muss dann natürlich weg. Inline-Style-Angaben sind sowieso böse.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
Die Formatierung für diese steht im Stylesheet:
.js .visible { visibility: visible }Ja, aber nicht so, sondern:
.js #DynText { visibility: hidden } .js #DynText.visible { visibility: visible }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo,
Die Formatierung für diese steht im Stylesheet:
.js .visible { visibility: visible }Ja, aber nicht so, sondern:
.js #DynText { visibility: hidden }
.js #DynText.visible { visibility: visible }
Warum? Die erste Variante ist allgemeiner und nachträgliche Änderungen sind einfacher. Habe das auch mal gut begründet in einem Blog gelesen, den ich leider gerade nicht mehr finde, sonst hätt' ich ihn verlinkt. Es wurde dafür plädiert, in CSS nicht auf IDs zu verweisen, sondern ausschließlich classnames zu verwenden. ~~~css .js .visible { visibility: visible; } .js .hidden { visibility: hidden; }Der classname "js" für das <html>-Element kann z.B. automatisch vom modernizr vergeben werden.
Gruß, Don P
-
Om nah hoo pez nyeetz, Don P!
Warum? Die erste Variante ist allgemeiner und nachträgliche Änderungen sind einfacher.
Das kommt sicher auf die komplette Webpräsenz an.
Habe das auch mal gut begründet in einem Blog gelesen, den ich leider gerade nicht mehr finde, sonst hätt' ich ihn verlinkt. Es wurde dafür plädiert, in CSS nicht auf IDs zu verweisen, sondern ausschließlich classnames zu verwenden.
den such mal.
Der classname "js" für das <html>-Element kann z.B. automatisch vom modernizr vergeben werden.
Das würde ich in dem Fall vielleicht doch nicht machen.
Der Einzeiler document.getElementsByTagName('html')[0].className ="js"; tut es auch. Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Der Einzeiler document.getElementsByTagName('html')[0].className ="js"; tut es auch.
1. Warum willst du das Wurzel-Element uneffizient per
getElementsByTagName() aus dem DOM suchen, wenn mitdocument.documentElementschon eine Referenz auf dieses da ist?2. Warum willst du eine eventuell vorhande Klasse überschreiben?
Ich hatte den passenden Einzeiler doch schon angegeben.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
- Warum willst du das Wurzel-Element uneffizient per
getElementsByTagName() aus dem DOM suchen, wenn mitdocument.documentElementschon eine Referenz auf dieses da ist?
Da hast du natürlich recht.
- Warum willst du eine eventuell vorhande Klasse überschreiben?
Weil ich weiß, dass in diesem Fall keine Klasse vorhanden ist ;-)
Meine Einwände richteten sich primär gegen den Modernisierer.
Matthias
--
1/z ist kein Blatt Papier.
- Warum willst du das Wurzel-Element uneffizient per
-
-
-
-
-
document.allist Unsinn. War nie StandardWird derzeit als Obsolete Feature standardisiert: http://dev.w3.org/html5/spec/Overview.html#dom-document-all.
und funktioniert nur in einigen Browsern.
Alle großen Browser haben eine Art Kompatibilität zu document.all. Die wirkt sich je nach Verwendungsweise und Rendermodus verschieden aus. Es stimmt, dass Firefox im standardkonformen Rendermodus kein document.all.foo mehr unterstützt. Hingegen verbergen Webkit, Firefox und Opera ihre Unterstützung bei der Abfrage von document.all.
Dazu erhält das 'html'-Element per JavaScript eine Klasse "js":
<script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";</script>[/code]Strenggenommen hat das html-Element kein class-Attribut und das zugehörige DOM-Interface keine className-Eigenschaft. Nicht in HTML 4, nicht in DOM 2 HTML, nicht in XHTML 1.0, nicht in XHTML 1.1/M12n. Erst HTML5 erlaubt es. Genauso wie document.all. Gut, HTMLElement#className ist natürlich nicht obsolet. Aber auch obsolete Features muss ein UA unterstützen.
Mathias
-
-