Lieber Matze,

Doch zuerst einmal der Code um den es mir geht:

den braucht es nicht, da Du ein Online-Beispiel bereitgestellt hast, welches man unter „problematische Seite“ bequem erreichen und untersuchen kann. So bin ich auch auf die Datei boxentest.js gestoßen.

Kann das daran liegen, dass ich in den unteren EventListener (box02) noch keinen 'DOMContentLoaded' gesetzt habe und wenn ja, wie füge ich den ein?

In boxentest.js ist nur ein Teil der Geschäftslogik in den DOMContentLoaded-EventListener eingebunden. Du könntest grundsätzlich alles dort hineinschreiben. Ob das aber das Problem löst, kann ich aktuell nicht sagen.

Wenn ein input-Event den Body erreicht, muss die passende EventListener-Funktion starten, sich aus dem Array alle Zusammenhänge holen und der Reihe nach abarbeiten. Das sollte auch funktionieren, wenn Du den EventListener nicht innerhalb der DOMContentLoaded-Funktion an den Body bindest, denn der Body ist grundsätzlich immer da. Es sei denn, dieser würde später nach dem Parsing durch ein anderes Objekt ersetzt, was aber keinen Sinn ergibt.

Macht hier ein 'input', daß sich auf den 'body' bezieht wirklich Sinn?

Ja, das tut es. Ereignisse werden von einem Element aus ausgelöst. Dann fangen sie an zu „blubbern“, sodass irgendwann der Body dieses Event abbekommt. Genau hier greift dann unsere Funktion, die ihrerseits das ursprünglich auslösende Element ermittelt, das in event.target referenziert ist.

Da ich ja weitere Funktionen einbaue ist es glaube ich nicht gut, sich nur für diese auf den Body zu beziehen. Wäre es also nicht klüger auch hier ein 'getElementById' mit 'change' zu setzen? Aber was setze ich dann als Auslöser (data.checkboxID), (box02) oder gibt es da etwas was ich übersehen habe?

Die Idee ist, genau eine Funktion über das Event auslösen zu lassen, die dann ihrerseits klärt, was zu tun ist. Du kannst verschiedene Funktionalitäten von dieser einen Funktion aus steuern. Kommt darauf an, was Du wirklich zu erreichen suchst.

3. Gibt es eine Möglichkeit...... äehm... die in der ersten Funktion bestimmten Variablen (farbe01 - farbe03) mit der ausgabe der zweiten Funktion zu verknüpfen? Hinter dem 'Rand ist aktiviert' steht dann der Farbwert von farbe01, hinter dem 'Schatten ist aktiviert' steht dann der Wert von farbe02..... usw

Ja. Was spricht denn dagegen, das passende Farbwahl-Element (oder vielmehr dessen ID) in das jeweilige Zusammenhänge-Objekt aufzunehmen?

const tasks = [
  {
    "checkboxID": "s1",
    "checked": "Rand ist aktiviert!",
    "colorID": "farbe1",
    "outputID": "box1",
    "unchecked": ""
  }
];

In der Auswertung wird dann eben dessen Wert berücksichtigt:

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

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

      if (colorChooser) {
        text += " - Farbe: " + colorChooser.value;
      }

      output.textContent = text;
    }
  });

4. Eher unwichtig, könnte mir aber die zukünftige Arbeit an meinem Projekt erleichtern. In der ersten Funktion (farbwahl00) wiederhole ich auch sehr oft den selben code was ja nicht sehr 'Dry' ist wie ich gelernt habe - Kann ich auch da irgendwie ein Array einarbeiten.....

LOL - siehe oben. ;-) Deshalb nannte ich das Array ursprünglich auch nicht box02, sondern tasks, weil ich davon ausging, dass man damit noch mehr tun kann, als nur eine bestimmte Box zu überwachen.

Liebe Grüße

Felix Riesterer