Javascript läßt sich nicht auslagern - reloaded von Matze, 12.03.2024 11:07

Javascript läßt sich nicht auslagern - reloaded

Matze Homepage des Autors 12.03.2024 11:07

So, wie angedroht bin ich jetzt mit einem Account angemeldet und werde meine Frage jetzt erweitern....

Doch zuerst einmal der Code um den es mir geht:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <!--  <script src="boxentest.js"></script>  -->
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>

   <label for="farbe01">Rand: </label>
   <input type="checkbox" id="s1" value="Rand">
			<input id="farbe01" type="color" value="#466eaf">
			<output id="ausgabe01"></output>
			<br>
   <label for="farbe02">Schatten: </label>
   <input type="checkbox" id="s2" value="schatten">
			<input id="farbe02" type="color" value="#006767">
			<output id="ausgabe02"></output>
			<br>
   <label for="farbe03">Steg: </label>
   <input type="checkbox" id="s3" value="steg">
			<input id="farbe03" type="color" value="#00ff00">
			<output id="ausgabe03"></output>
			<br><br><br>	
			  
  <p id="box1" aria-live="polite"></p>
  <p id="box2" aria-live="polite"></p>
  <p id="box3" aria-live="polite"></p>  
			
<script>
 window.addEventListener('DOMContentLoaded', function () {window.addEventListener("load", farbwahl00);
 document.getElementById("farbe01").addEventListener("change", farbwahl00);
 document.getElementById("farbe02").addEventListener("change", farbwahl00);
 document.getElementById("farbe03").addEventListener("change", farbwahl00);
	function farbwahl00() {
  	    const farbe01= document.getElementById("farbe01").value;
        const farbe02= document.getElementById("farbe02").value;
		const farbe03= document.getElementById("farbe03").value;	
        document.getElementById("ausgabe01").textContent = farbe01;
	    document.getElementById("ausgabe02").textContent = farbe02;
	    document.getElementById("ausgabe03").textContent = farbe03;}
});

const box02 = [
  {"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 => {
  box02.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;
    }
  });
});
</script>

</body>

Hierzu habe ich mehrere Fragen (Herausforderungen).

Wenn ich den Scriptteil in die boxentest.js auslagere (ja, ist in diesem Beispiel auskommentiert, das weiß ich!)) aktualisiert er mir in der Anzeige zwar die Farbwerte aber Er zeigt nicht mehr an welches Element 'aktiviert' ist. 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?
Bezieht sich auch auf den unteren Eventlistener (box02). Macht hier ein 'input', daß sich auf den 'body' bezieht wirklich Sinn? 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?
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
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.....

Ich habe mal zwei Links eingefügt..... Einen zur eigentlichen Seite Das ist aber im Moment eher ein grober Entwurf - zeigt aber in der verlinkten Unterseite wo ich mal hin will wenn ich groß bin. Der zweite link ist einfach nur ein Testaufbau der wieder verschwindet wenn meine Fragen beantwortet sind..... Die Ladezeiten können bei beiden etwas länger sein, weil der Server hier vor mir auf dem Küchentisch steht.

Danke schon mal im vorraus für alle Tips und Anregungen, aber denkt daran - Bitte Langsam sprechen ich habe grade erst angefangen JS zu lernen.

Okay, bis dann,

Matze

Beitrag melden

– Informationen zu den Bewertungsregeln

akzeptierte Antworten