Javascript läßt sich nicht auslagern

[Felix Riesterer]

Lieber Matthias,

als Ergänzung zu den Hinweisen von Gunnar noch dieses:

DRY (don't repeat yourself) - vermeide identischen Code, wenn Du kannst.

In Deinem gezeigten JS-Code prüfst Du dreimal, ob eine Checkbox aktiviert ist, um dann einen Elementinhalt passend zu ändern. Da sollte es möglich sein, den Code genau nur einmal zu schreiben und dann entsprechend oft anzuwenden. Damit das sinnvoll gegliedert werden kann, hier ein Beispiel, wie ich das tun würde:

const tasks = [
  {
    "checkboxID": "s1",
    "checked": "Rand ist aktiviert!",
    "outputID": "box1",
    "unchecked": ""
  },
  {
    "checkboxID": "s2",
    "checked": "Schatten ist aktiviert!",
    "outputID": "box2",
    "unchecked": ""
  },
  {
    "checkboxID": "s3",
    "checked": "Steg ist aktiviert!",
    "outputID": "box3",
    "unchecked": ""
  }
];

document.body.addEventListener("input", event => {

  tasks.forEach(data => {
    const
      checkbox = document.getElementById(data.checkboxID),
      output = document.getElementById(data.outputID);

    if (checkbox && output && event.target == checkbox) {
      output.textContent = checkbox.checked ? data.checked : data.unchecked;
    }
  });
});

Zuerst wird eine Liste (Array) namens tasks beschrieben, die Objekte enthält, die jeweils darstellen sollen, was wie zusammenhängt und welche Textausgaben hat. Ein solches Objekt (als Objekt-Literal notiert) hat vier Eigenschaften:

1. checkboxID - die ID von <input type="checkbox">
2. checked - der anzuzeigende Textinhalt, wenn die Checkbox aktiviert ist
3. outputID - die ID desjenigen Elements, dessen Textinhalt als Ausgabe dient
4. unchecked - der anzuzeigende Textinhalt, wenn die Checkbox nicht aktiviert ist

Der EventListener der Wahl lautet nicht change, sondern input. Die Funktion, die als zweiter Parameter für addEventListener() angegeben ist, wurde hier als Pfeilfunktion notiert. Wichtig ist der Parameter event, der das Event-Objekt enthalten wird, wenn ein Eingabefeld bedient wird. Mit event.target lässt sich dann prüfen, ob eine unserer Checkboxen aktuell „angefasst“ wurde. Es ist sinnvoll, nur einen EventListener zu verwenden, anstatt an jedes Element einen eigenen zu pappen, weshalb er hier an document.body geklebt wird. In Deinem Fall kannst Du ihn auch auf das passende <form> aufkleben.

In der EventListener-Funktion wird nun jedes der Objekte in tasks einzeln abgearbeitet. Die Array-Methode forEach funktioniert im Grunde wie eine Schleife, nur dass man sich innerhalb einer (anonymen) Funktion befindet, die das jeweilige Array-Element als Parameter übergeben bekommt. Die anonyme Funktion hier (auch wieder als Pfeilfunktion notiert) nimmt das Element in der Variable data entgegen.

Mit dem Objekt in data können wir nun die Checkbox und das Anzeige-Element suchen. Wenn in den Variablen checkbox und output passende HTML-Element-Objekte stehen, dann ist das wie ein true, und wenn das HTML-Element in checkbox auch wirklich dasjenige ist, von dem das Ereignis ausgegangen ist, dann kann in das Ausgabe-Element ein entsprechender Inhalt geschrieben werden. Der ternäre Operator ist eine verkürzte Schreibweise, um sich ein if-else zu sparen.

Liebe Grüße

Felix Riesterer