Wiki „Element.classList.toggle“: Beispiel funktioniert teilweise falsch

[Samuel fiedler]

Hallo an alle!

Ich wollte mir heute mal etwas zu Klassen in JavaScript anschauen und habe im Wiki Element.classList.toggle() gefunden. Das hat mir geholfen, so manchen Seitenquelltext zu kürzen.

Nur bei der zweiten Spalte des Beispiels ist der Button falsch beschriftet:
Er fängt also bei „weniger“ an, obwohl das Element schon „eingeklappt“ ist. Wenn man darauf klickt, kommt mehr. Das ist genau verkehrtherum…

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel,

das kann ich nicht nachvollziehen. Bei mir steht da initial "mehr".

Der Beispiel-Quellcode ist

  <main>
    <p id="tipp">Wollen Sie mehr lesen? Dann klicken Sie auf die Boxen.</p>
    <section id="aktuelles">
      <h2>Aktuelles</h2>
      <button id="button1">weniger …</button>
    </section>  
    <section id="ueber" class="hide">    
      <h2>Über uns</h2>
      <button id="button2">mehr …</button>
    </section>
    <aside id="links">
      <h2>Links</h2>
    </aside>  
  </main>

D.h. die initiale Beschriftung des Buttons in der "Über uns" Spalte ist "mehr...".

Ob es gut gelöst ist, den Buttontext per JS auszutauschen, ist aber eine andere Frage. Ich würde zwei Spans reinsetzen, mit "weniger" und "mehr" darin, und deren Sichtbarkeit über CSS umschalten, abhängig von der hide-Klasse. Dann hat man mit der Beschriftungssteuerung keine Arbeit mehr und hat den Buttontext auch nicht magisch im Script stehen.

Alternativ dazu könnte man die Beschriftungen über data-Attribute an den Button kleben. Aber ins Script gehören sie mMn nicht.

Mein Änderungsvorschlag zum Beispiel:

https://wiki.selfhtml.org/wiki/Beispiel:JS-classlist.toggle-v2.html

Anschauen - Ausprobieren

Rolf

[Gunnar Bittersmann]

@@Rolf B

das kann ich nicht nachvollziehen. Bei mir steht da initial "mehr".

Danach verhält sich der Button aber falsch. Nach Click klappt die Box auf (zu langsam übrigens) und er steht „mehr“ im Button.

Ob es gut gelöst ist, den Buttontext per JS auszutauschen, ist aber eine andere Frage.

Eine schnell beantwortete: Nein, ist es nicht.

Toggle-Buttons hat Heydon Pickering doch in seinen Inclusive Components beschrieben; das sollten man einfach mal lesen.

Auch sollte in dem Beispiel der Satz „Wollen Sie mehr lesen? Dann klicken Sie auf die Boxen“ weg. Zum einen ist er falsch; beim Click auf die Boxen passiert nichts. Zum anderen sollte ein UI selbsterklärend sein. Wenn es das nicht ist, muss es verbessert werden, nicht erklärt.

🖖 Живіть довго і процвітайте

[Samuel fiedler]

Hallo Gunnar Bittersmann!

Danach verhält sich der Button aber falsch. Nach Click klappt die Box auf (zu langsam übrigens) und er steht „mehr“ im Button.

Das stimmt allerdings. Habe mich gerade eben auch schon gewundert.
Dann habe ich wohl nach dem Öffnen herumgespielt, bin wieder auf „Quelltext“ gegangen und danach auf „Vorschau“.

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Gunnar,

Der Satz

„Wollen Sie mehr lesen? Dann klicken Sie auf die Boxen“

dürfte ein Relikt sein, vermutlich war das Beispiel mal ohne Buttons realisiert.

Da ich im Gegensatz zu Dir kein Profi-Frontender bin, sondern nur ein Programmierer-38-ender, habe ich Pickering nicht auswendig drauf und lese ihn auch nicht regelmäßig. Aber ich guck mir das nochmal an.

Edit: Überflogen - das ist für diesen Artikel zu viel. Es geht dort um classList - eine umfangreiche Abhandlung über den idealen Toggle-Button ist dort weit weg vom Thema des Artikels. D.h. da muss man grundsätzlich hirnen, wie man das Beispiel gestaltet.

Ein Tutorial zu bedienbaren Togglebuttons gehört woanders hin - hier weiß ich aber auch nicht, was Pickering tut, wenn wir seine Erkenntnisse in unser Wiki schreiben. Reicht eine Attributierung?

Edit 2: Pickering geht dermaßen in Details, dass ich befürchte, dass man damit viele Leute abhängt. Mich hängt er gründlich ab, da muss ich mehr Zeit investieren.

Rolf

[Rolf B]

Hallo Gunnar,

Danach verhält sich der Button aber falsch. Nach Click klappt die Box auf (zu langsam übrigens) und er steht „mehr“ im Button.

Ja, das ist die Folge davon, wenn der Text an mehreren Stellen steht.

Der Button im HTML ist mit "mehr …" initial geplenkt, das JS fragt aber "mehr" ab und schaltet basierend darauf um. Deswegen ist der Text danach entgegengesetzt zur Realität.

Rolf

[Der Martin]

Hallo Rolf,

Der Button im HTML ist mit "mehr …" initial geplenkt

da ist nichts geplenkt.
Stehen die Auslassungspunkte für den Rest eines Wortes, das nicht vollständig ausformuliert ist, dann schließen sie ohne Blank direkt an.
Ist das Wort vor den Auslassungspunkten aber vollständig, bleibt die Leerstelle zwischen dem Wort und den Auslassungspunkten bestehen.

Fall 1: Jetzt hab ich aber genug von dem Sch...
Fall 2: Jetzt hab ich aber genug von dem ...

Einen schönen Tag noch
 Martin