Regel in CSS Klasse ändern

[Auge]

Hallo

Ich nehm' mal ein Beispiel von mir. Das mag nicht unbedingt elegant sein, aber es funktioniert. Zum herumspielen sollte das Skript jedenfalls reichen.

Ich hoffe du nimmst es mir nicht übel, wenn ich dennoch etwas dazu schreibe. ;-)

Keineswegs, deine fundierte Art der Kritik ist mir, selbst wenn ich einzelne Punkte anders sehen sollte, stets willkommen.

window.addEventListener("DOMContentLoaded", start, false);

vs.

window.addEventListener('DOMContentLoaded', start);

Die Browser, bei denen eine explizite Angabe für diesen Parameter notwendig gewesen wäre, dürften mittlerweile wohl schon lange ausgestorben sein. Es ist aber natürlich kein Fehler false anzugeben. Ich wollte nur mal erwähnt haben, dass das eigentlich nicht notwendig ist.

Ich weiß, ich weiß. Da wir beide das schon einmal hatten, hatte ich noch überlegt, das false aus dem Code herauszunehmen. Das hätte dem Forumsarchiv ein paar Kilobyte erspart. :-)

/**
 * registriere den Event-Listener für das aside #function_bar,
 * das ein Formular enthält, welches wiederum Buttons enthält
 */
function start() {
var listen2Click = document.getElementById("function_bar");
listen2Click.addEventListener("click", switchClass, false);
listen2Click.setAttribute("class", "js");
}

Gibt es auch ein aside function_foo? – scnr ;-)

Nein, es ist der Container für die Steuerung der Angebote, quasi die funktionierende Theke, also die Funktionsbar. :-)

Es ist meistens die beste Wahl mit classList zu arbeiten, da hierbei nicht das Risiko besteht, dass ein Wert unbeabsichtigt überschrieben wird.

Ich habe mir getAttribute, setAttribute und removeAttribute aus der (alten) Doku herausgesucht und benutzt. Zudem sind die Namen selbsterklärend. Da ich seltenst mit JavaScript arbeite, ist das für mich tatsächlich relevant. Ich will ja auch, wie in diesem Fall tatsächlich zutreffend, nach mehreren Jahren erkennen können, was ich da zusammengestöpselt habe.

Allerdings ist classList mit add und remove mindestens genauso gut lesbar.

function inArray(item, array)

Wenn es darum geht herauszufinden, ob ein bestimmter Wert in einem Array enthalten ist, dann gäbe es zu diesem Zweck auch in JavaScript eine eingebaute Methode, nämlich Array.prototype.includes.

Das war mir nicht bekannt. Ich suchte halt das Pendant zur PHP-Funktion und fand das obige, seinen Zweck erfüllende Beispiel.

function switchClass(e) {
if (!e) e = window.event;

In einem Browser der mit dem Ereignismodell des DOM nichts anfangen kann, würde diese Funktion niemals aufgerufen werden. Die Prüfung ob ein Event-Objekt übergeben wurde kann man sich also sparen.

Das kommt davon, wenn man das zusammenkopiert …

Zumal du … konsequenterweise als Alternative noch e.srcElement hättest anbieten müssen. ;-)

Da der Code eh nur im Firefox und evtl. noch im Chromium funktionieren muss, sollte das kein Thema sein.

… wie auch immer, im Folgenden nochmal alles kompakt zusammengefasst.

window.addEventListener('DOMContentLoaded', function ( ) {

  const aside = document.getElementById('function_bar');

  aside.addEventListener('click', function (event) {
    const value = event.target.value,
          list = ['without_rework', 'with_rework', 'deletions'];

    document.body.className = list.includes(value) ? value : '';
  });

});

Sieht grundsätzlich übersichtlicher aus, auch wenn ich das Konzept anonymer Funktionen immer noch etwas verwirrend finde. Zwei Fragen stellen sich mir dennoch.

1. Warum aside als Konstante und nicht als Variable?
2. Hinterlässt document.body.className = list.includes(value) ? value : ''; bei nicht zutreffender Bedingung nicht unnötigerweise ein leeres Class-Attribut?

Tschö, Auge