Inhalte ausblenden

[Gunnar Bittersmann]

@@Meowsalot

Ein paar Anmerkungen hab ich noch:

          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') gerade vorher schon mal abgefragt, danach auf das Gegenteil !pressed gesetzt, weißt also genau, was da jetzt drinsteht. Kein Grund, das nochmals abzufragen, du kannst genauso !pressed verwenden; pressed1 brauchst du nicht.

BTW, pressed 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.

          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:

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):

const eintraegeTableElement = document.getElementById('eintraege');

oder

const eintraegeTableElement = document.querySelector('#eintraege');

Im Eventhandler dann

eintraegeTableElement.setAttribute('data-filtered', String(!pressed));

oder

eintraegeTableElement.dataset.filtered = String(!pressed);

          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:

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:

event.target.textContent = pressed ? 'Nur meine anzeigen' : 'Alle anzeigen';

LLAP 🖖