Suche einen Sorting-Button bzw. ein Sorting Icon

[Gunnar Bittersmann]

@@Der Martin

  sortDesc = false;

  sortSort() {
    this.sortDesc = !this.sortDesc;
    document.getElementById("sort1" ).className =
      ( this.sortDesc ?
        "sort-by-desc" :
        "sort-by-asc");
  }

Man muss nicht bei jedem Aufruf von sortSort das Element erneut im DOM mit document.getElementById("sort1") suchen. Raus damit aus der Funktion; vorher:

const sort1Element = document.getElementById("sort1");

function sortSort() { … }

oder

const sort1Element = document.querySelector("#sort1");

function sortSort() { … }

in der Funktion dann

sort1Element.className = …;

Die Verwendung von Element.className ist immer problematisch, wenn da noch andere Klassen im Spiel sind, die man nicht überschreiben möchte.

Stattdessen kann man besser die Methoden von Element.classList einsetzen:

sort1Element.classList.toggle("sort-by-desc", this.sortDesc);
sort1Element.classList.toggle("sort-by-asc", !this.sortDesc);

Eine der beiden Klassen ist noch redundant; man könnte die Unterschiedung ebenso anhand von "Klasse gesetzt" bzw. "keine Klasse gesetzt" machen.

Dann tut es Element.classList.toggle ohne den zweiten Parameter.

Und gleich kommt wahrscheinlich noch der Gunnar mit seinem Mantra, doch bitte keine Maße in px anzugeben.

Ehe wir an die Feinheiten gehen, sollten wir erstmal mit den Grundlagen anfangen: dem Markup.

LLAP 🖖