@@Meowsalot Ein paar Anmerkungen hab ich noch: > ~~~js > let pressed = event.target.getAttribute('aria-pressed') === 'true' > event.target.setAttribute('aria-pressed', String(!pressed)); > > let pressed1 = event.target.getAttribute('aria-pressed') === 'true' > ~~~ Du hattest doch `event.target.getAttribute('aria-pressed')`{:.language-js} gerade vorher schon mal abgefragt, danach auf das Gegenteil `!pressed`{:.language-js} gesetzt, weißt also genau, was da jetzt drinsteht. Kein Grund, das nochmals abzufragen, du kannst genauso `!pressed`{:.language-js} verwenden; `pressed1`{:.language-js} brauchst du nicht. BTW, `pressed`{:.language-js} ist kein besonders glücklich gewählter Bezeichner, da daraus nicht hervorgeht, ob das den Zustand vorher oder den neuen Zustand bezeichnet. Die Variable sollte umbenannt werden.   > ~~~js > if (pressed1 == true) { > document.getElementById('eintraege').setAttribute('data-filtered','true'); > } else { > document.getElementById('eintraege').setAttribute('data-filtered','false'); > } > ~~~ Du willst in beiden Zweigen dasselbe tun, nämlich dem `data-filtered`-Attrubut einen booleschen Wert zuweisen. (Genauer gesagt: einen String, der einen booleschen Wert repräsentiert.) Dafür brauchst du kein `if`, das machst du analog wie oben beim `aria-pressed`-Attribut. Deren Werte sollen ja immer übereinstimmen, also: ~~~js let pressed = event.target.getAttribute('aria-pressed') === 'true'; event.target.setAttribute('aria-pressed', String(!pressed)); document.getElementById('eintraege').setAttribute('data-filtered', String(!pressed)); ~~~ Es muss auch nicht sein, das Element mit der ID "eintraege" jedesmal neu zu suchen. Das kannst du einmal am Anfang erledigen (also außerhalb des Eventhandlers): {:id="id"} ~~~JavaScript const eintraegeTableElement = document.getElementById('eintraege'); ~~~ oder ~~~JavaScript const eintraegeTableElement = document.querySelector('#eintraege'); ~~~ Im Eventhandler dann ~~~JavaScript eintraegeTableElement.setAttribute('data-filtered', String(!pressed)); ~~~ oder ~~~JavaScript eintraegeTableElement.dataset.filtered = String(!pressed); ~~~   > ~~~js > let text = event.target.textContent === 'Alle anzeigen' ? 'Nur meine anzeigen' : 'Alle anzeigen'; > event.target.textContent = text; > }); > ~~~ Noch eine überflüssige Abfrage; die (sichtbare) Buttonbeschriftung hängt auch mit dem `pressed`-Zustand zusammen: ~~~JavaScript let text = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen'; event.target.textContent = text; ~~~ Wobei es hier keinen Sinn macht, da über eine Variable `text` zu gehen. Gleich direkt: ~~~JavaScript event.target.textContent = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen'; ~~~ LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Meowsalot Ein paar Anmerkungen hab ich noch: > ~~~js > let pressed = event.target.getAttribute('aria-pressed') === 'true' > event.target.setAttribute('aria-pressed', String(!pressed)); > > let pressed1 = event.target.getAttribute('aria-pressed') === 'true' > ~~~ Du hattest doch `event.target.getAttribute('aria-pressed')`{:.language-js} gerade vorher schon mal abgefragt, danach auf das Gegenteil `!pressed`{:.language-js} gesetzt, weißt also genau, was da jetzt drinsteht. Kein Grund, das nochmals abzufragen, du kannst genauso `!pressed`{:.language-js} verwenden; `pressed1`{:.language-js} brauchst du nicht. BTW, `pressed`{:.language-js} ist kein besonders glücklich gewählter Bezeichner, da daraus nicht hervorgeht, ob das den Zustand vorher oder den neuen Zustand bezeichnet. Die Variable sollte umbenannt werden.   > ~~~js > if (pressed1 == true) { > document.getElementById('eintraege').setAttribute('data-filtered','true'); > } else { > document.getElementById('eintraege').setAttribute('data-filtered','false'); > } > ~~~ Du willst in beiden Zweigen dasselbe tun, nämlich dem `data-filtered`-Attrubut einen booleschen Wert zuweisen. (Genauer gesagt: einen String, der einen booleschen Wert repräsentiert.) Dafür brauchst du kein `if`, das machst du analog wie oben beim `aria-pressed`-Attribut. Deren Werte sollen ja immer übereinstimmen, also: ~~~js let pressed = event.target.getAttribute('aria-pressed') === 'true'; event.target.setAttribute('aria-pressed', String(!pressed)); document.getElementById('eintraege').setAttribute('data-filtered', String(!pressed)); ~~~ Es muss auch nicht sein, das Element mit der ID "eintraege" jedesmal neu zu suchen. Das kannst du einmal am Anfang erledigen (also außerhalb des Eventhandlers): {:.id="id"} ~~~JavaScript const eintraegeTableElement = document.getElementById('eintraege'); ~~~ oder ~~~JavaScript const eintraegeTableElement = document.querySelector('#eintraege'); ~~~ Im Eventhandler dann ~~~JavaScript eintraegeTableElement.setAttribute('data-filtered', String(!pressed)); ~~~ oder ~~~JavaScript eintraegeTableElement.dataset.filtered = String(!pressed); ~~~   > ~~~js > let text = event.target.textContent === 'Alle anzeigen' ? 'Nur meine anzeigen' : 'Alle anzeigen'; > event.target.textContent = text; > }); > ~~~ Noch eine überflüssige Abfrage; die (sichtbare) Buttonbeschriftung hängt auch mit dem `pressed`-Zustand zusammen: ~~~JavaScript let text = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen'; event.target.textContent = text; ~~~ Wobei es hier keinen Sinn macht, da über eine Variable `text` zu gehen. Gleich direkt: ~~~JavaScript event.target.textContent = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen'; ~~~ LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Meowsalot Ein paar Anmerkungen hab ich noch: > ~~~js > let pressed = event.target.getAttribute('aria-pressed') === 'true' > event.target.setAttribute('aria-pressed', String(!pressed)); > > let pressed1 = event.target.getAttribute('aria-pressed') === 'true' > ~~~ Du hattest doch `event.target.getAttribute('aria-pressed')`{:.language-js} gerade vorher schon mal abgefragt, danach auf das Gegenteil `!pressed`{:.language-js} gesetzt, weißt also genau, was da jetzt drinsteht. Kein Grund, das nochmals abzufragen, du kannst genauso `!pressed`{:.language-js} verwenden; `pressed1`{:.language-js} brauchst du nicht. BTW, `pressed`{:.language-js} ist kein besonders glücklich gewählter Bezeichner, da daraus nicht hervorgeht, ob das den Zustand vorher oder den neuen Zustand bezeichnet. Die Variable sollte umbenannt werden.   > ~~~js > if (pressed1 == true) { > document.getElementById('eintraege').setAttribute('data-filtered','true'); > } else { > document.getElementById('eintraege').setAttribute('data-filtered','false'); > } > ~~~ Du willst in beiden Zweigen dasselbe tun, nämlich dem `data-filtered`-Attrubut einen booleschen Wert zuweisen. (Genauer gesagt: einen String, der einen booleschen Wert repräsentiert.) Dafür brauchst du kein `if`, das machst du analog wie oben beim `aria-pressed`-Attribut. Deren Werte sollen ja immer übereinstimmen, also: ~~~js let pressed = event.target.getAttribute('aria-pressed') === 'true'; event.target.setAttribute('aria-pressed', String(!pressed)); document.getElementById('eintraege').setAttribute('data-filtered', String(!pressed)); ~~~ Es muss auch nicht sein, das Element mit der ID "eintraege" jedesmal neu zu suchen. Das kannst du einmal am Anfang erledigen (also außerhalb des Eventhandlers): ~~~JavaScript const eintraegeTableElement = document.getElementById('eintraege'); ~~~ oder ~~~JavaScript const eintraegeTableElement = document.querySelector('#eintraege'); ~~~ Im Eventhandler dann ~~~JavaScript eintraegeTableElement.setAttribute('data-filtered', String(!pressed)); ~~~ oder ~~~JavaScript eintraegeTableElement.dataset.filtered = String(!pressed); ~~~   > ~~~js > let text = event.target.textContent === 'Alle anzeigen' ? 'Nur meine anzeigen' : 'Alle anzeigen'; > event.target.textContent = text; > }); > ~~~ Noch eine überflüssige Abfrage; die (sichtbare) Buttonbeschriftung hängt auch mit dem `pressed`-Zustand zusammen: ~~~JavaScript let text = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen'; event.target.textContent = text; ~~~ Wobei es hier keinen Sinn macht, da über eine Variable `text` zu gehen. Gleich direkt: ~~~JavaScript event.target.textContent = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen'; ~~~ LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann