@@Der Martin > ~~~ js > 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`{:.language-js} das Element erneut im DOM mit `document.getElementById("sort1")`{:.language-js} suchen. Raus damit aus der Funktion; vorher: ~~~js const sort1Element = document.getElementById("sort1"); function sortSort() { … } ~~~ oder ~~~js const sort1Element = document.querySelector("#sort1"); function sortSort() { … } ~~~ in der Funktion dann ~~~js sort1Element.className = …; ~~~ Die Verwendung von `Element.className`{:.language-js} 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`{:.language-js} einsetzen: ~~~js 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`{:.language-js} 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](https://forum.selfhtml.org/self/2020/jan/08/suche-einen-sorting-button-bzw-ein-sorting-icon/1762740#m1762740). LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@Der Martin > ~~~ js > 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`{:.language-js} das Element erneut im DOM mit `document.getElementById("sort1")`{:.language-js} suchen. Raus damit aus der Funktion; vorher: ~~~js const sort1Element = document.getElementById("sort1"); ~~~ oder ~~~js const sort1Element = document.querySelector("#sort1"); ~~~ in der Funktion dann ~~~js sort1Element.className = …; ~~~ Die Verwendung von `Element.className`{:.language-js} 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`{:.language-js} einsetzen: ~~~js 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`{:.language-js} 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](https://forum.selfhtml.org/self/2020/jan/08/suche-einen-sorting-button-bzw-ein-sorting-icon/1762740#m1762740). LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@Der Martin > ~~~ js > 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`{:.language-js} das Element erneut im DOM mit `document.getElementById("sort1")`{:.language-js} suchen. Raus damit: ~~~js const sort1Element = document.getElementById("sort1"); ~~~ oder ~~~js const sort1Element = document.querySelector("#sort1"); ~~~ in der Funktion dann ~~~js sort1Element.className = …; ~~~ Die Verwendung von `Element.className`{:.language-js} 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`{:.language-js} einsetzen: ~~~js 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`{:.language-js} 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](https://forum.selfhtml.org/self/2020/jan/08/suche-einen-sorting-button-bzw-ein-sorting-icon/1762740#m1762740). LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@Der Martin > ~~~ js > 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`{:.language-js} das Element erneut im DOM mit `document.getElementById("sort1")`{:.language-js} suchen. Raus damit: ~~~js const sort1Element = document.getElementById("sort1"); ~~~ oder ~~~js const sort1Element = document.querySelector("#sort1"); ~~~ in der Funktion dann ~~~js sort1Element.className = …; ~~~ Die Verwendung von `Element.className`{:.language-js} ist immer problematische, wenn da noch andere Klassen im Spiel sind, die man nicht überschreiben möchte. Stattdessen kann man besser die Methoden von `Element.classList`{:.language-js} einsetzen: ~~~js 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`{:.language-js} 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](https://forum.selfhtml.org/self/2020/jan/08/suche-einen-sorting-button-bzw-ein-sorting-icon/1762740#m1762740). LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling