Problem mit Schreibweise eines Links (Validierung bei W3C)

[Jörg]

Hallo Allerseits,

ich habe eine Frage an die Javascript-Experten hier. Ich habe in eine Website (XHTML 1.0 Transitional, utf-8) ein kleines JavaScript mit Funktionen zum gleichzeitigen Ein- bzw. Ausblenden mehrerer Ebenen (<div>-Container) eingebaut. Das Skript wird per onClick-Funktion bei Mausklick auf einen Link (bzw. mehrere Links) ausgelöst und funktioniert auch völlig problemfrei. Beim Validieren der Seite im W3C-Validator (http://validator.w3.org) bekam ich jedoch die folgende Meldung:

---Meldung---

<a href="#" onClick="ausblenden( 'sortiment');ausblenden( …

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

---Ende der Meldung---

Daraufhin habe ich die Schreibweise des Links geändert in:

<a href="javascript:ausblenden( 'sortiment');ausblenden( 'neuheiten');ausblenden( 'informatives');ausblenden( 'angebote');ausblenden( 'hinweise');ausblenden( 'anfahrt');ausblenden( 'impressum');einblenden( 'startseite'); return false;">Startseite</a>

... mit dem Ergebnis, das dann die Links bei Mausklick nicht reagieren. Anschliessend habe ich die Schreibweise dann nochmals geändert:

<a href="#" onClick="javascript:ausblenden( 'sortiment');ausblenden( 'neuheiten');ausblenden( 'informatives');ausblenden( 'angebote');ausblenden( 'hinweise');ausblenden( 'anfahrt');ausblenden( 'impressum');einblenden( 'startseite'); return false;">Startseite</a>

... nun funktionieren die Links zwar wieder, doch beim Validieren bekomme ich wieder die gleiche Meldung.

Ich bin leider in JavaScript nicht sonderlich bewandert, deshalb meine Bitte um Hilfe an die Experten hier, meine Bitte mir einen Rat zu geben, wie ich die Schreibweise ändern müsste.

Vielen Dank schon einmal im Voraus für Eure Bemühungen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Jörg!

Das Attribut heißt onclick, vielleicht stört sich der Validator ja daran.

Matthias

[Jörg]

Om nah hoo pez nyeetz, Jörg!

Das Attribut heißt onclick, vielleicht stört sich der Validator ja daran.

Matthias

Hallo Matthias,

danke erst einmal für Deine schnelle Antwort. Wenn ich die Meldung genauer betrachte scheint sich der Validator genau daran zu stören. Doch weiss ich leider nicht wie ich die Schreibweise ändern muss, damit der Validator das Ganze dannakzeptiert. Ich habe es schon mit der folgenden Schreibweise probiert:

<a href="javascript:ausblenden( 'sortiment');ausblenden( 'neuheiten');ausblenden( 'informatives');ausblenden( 'angebote');ausblenden( 'hinweise');ausblenden( 'anfahrt');ausblenden( 'impressum');einblenden( 'startseite'); return false;">Startseite</a>

... dann akzeptiert der Validator zwar die Schreibweise (Dokumenten-Typ ist XHTML 1.0 Transnational), doch funktionieren dann die Links nicht mehr.

Was kann ich anders machen?

Gruss Jörg

[Der Martin]

Hallo,

Das Attribut heißt onclick, vielleicht stört sich der Validator ja daran.

nicht nur vielleicht, sondern ganz bestimmt. Denn XHTML ist case-sensitive, und die Element- und Attributnamen gehören nun mal per definitionem durchgehend klein geschrieben.

Ciao,
 Martin

[Jörg]

Hallo Matthias, Hallo Martin,

vielen Dank für Eure Hilfe, es hat gewirkt ... oh Mann, manchmal sieht man den Wald vor lauter Bäumen nicht -> Kleinschreibung !!! bei XHTML -> ja natürlich. Hatte onClick aus einem älteren Projekt übernommen, das war aber in der HTML-Sytax geschrieben.

Vielen Dank für Eure Unterstützung, jetzt ist alles schick ... weil: onclick

Gruss Jörg

[Der Martin]

Hi,

Hatte onClick aus einem älteren Projekt übernommen, das war aber in der HTML-Sytax geschrieben.

aber auch in HTML (ohne X) wird die Kleinschreibung zumindest empfohlen. Einerseits um eine eventuelle Portierung hin zu XHTML zu erleichtern, andererseits wegen der besseren Lesbarkeit. Wobei das zweite Argument natürlich nicht so sehr gegen CamelCase gerichtet ist, sondern gegen die verbreitete Unart, ELEMENT- UND/ODER ATTRIBUTNAMEN in Großbuchstaben zu schrei(b)en.

Vielen Dank für Eure Unterstützung, jetzt ist alles schick ... weil: onclick

;-)

Schönen Sonntag noch,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

aber auch in HTML (ohne X) wird die Kleinschreibung zumindest empfohlen. Einerseits um eine eventuelle Portierung hin zu XHTML zu erleichtern, andererseits wegen der besseren Lesbarkeit. Wobei das zweite Argument natürlich nicht so sehr gegen CamelCase gerichtet ist, sondern gegen die verbreitete Unart, ELEMENT- UND/ODER ATTRIBUTNAMEN in Großbuchstaben zu schrei(b)en.

Die Lesbarkeit liegt im Auge des Betrachters; Portierung zu XML ist für die allermeisten kein Thema (seufz).

Bleibt aber noch ein Argument: Der GZIP-Algorithmus kann mehr rausholen, wenn Element- und Attributbezeichner konsequent gleich geschrieben sind. Dann müssen weniger Daten übertragen werden; die Seite lädt schneller.

Qapla'

[Gunnar Bittersmann]

@@Jörg:

nuqneH

<a href="#" onClick="ausblenden( 'sortiment');ausblenden( …

Daraufhin habe ich die Schreibweise des Links geändert in:
<a href="javascript:ausblenden( 'sortiment');ausblenden( …

Das eine ist so schlecht wie das andere.

Durch @href="#" wird an den Seitenanfang gesprungen, das will man wohl nicht. Wenn’s gar kein Link ist, ist das @href-Attribut falsch.

Damit das a-Element dennoch per Tastatur anwählbar ist, sollte @tabindex="0" gesetzt werden. Und wenn man schon kein button-Element verwendet (Warum eigentlich nicht?), dann @role="button".

Genauso wie CSS-Code nicht im HTML-Code stehen sollte (keine @style-Attribute), sollte auch kein JavaScript-Code im HTML-Code stehen (keine @on…-Attribute). Besser dem Element eine ID geben und den Eventhandler im JavaScript registrieren:

<a id="ausblenden-button" tabindex="0" role="button"> bzw. <button id="ausblenden-button">

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Und wenn man schon kein button-Element verwendet (Warum eigentlich nicht?), dann @role="button".

Link vergessen : http://www.paciellogroup.com/blog/misc/ARIA/atmedia2008/

Qapla'