Hallo Ihr 
Ich habe aktuell ein Problem an dem ich hänge und ich komme irgendwie nicht weiter - vermutlich suche ich nach den falschen Begriffen oder so?!
Ich habe eine Seite erstellt, welche über AJAX und JavaScript mehrere Farbcodes und Namen hierzu aus einer JSON-API zieht (Feste Anzahl).
Es gibt dann eine Tabelle, in welcher der Zellenhintergrund in dem Farbcode gefärbt wird und der Name als Inhalt drin steht. Das funktioniert auch alles schon soweit gut. Nun kann es aber vorkommen, dass der Farbcode Schwarz ist - und die Schrift auch. Das verringert die Lesbarkeit enorm, insbesondere auf einem Ausdruck 
Ich habe aktuell "alles" in einem HTML Dokument. Das ist nicht schön. Außerdem funktioniert das Script für die Farbanpassung nur, wenn ich dieses im gleichen Scriptblock laufen lasse?!
Es ist auch JScript eingebunden, da die Scriptvorlage die ich gefunden und angepasst habe dies nutzt. Das funktioniert auch. Wenn ich es recht verstanden habe ist im JScript $ als "Zentraler Name" definiert. Das finde ich aber nirgends und ich vermute, dass ich einfach den Wald vor lauter Bäumen nicht sehe 
Kann mir vielleicht einer einen Tipp geben?
Wenn ich den Aufruf der Funktion im oberen Bereich zufüge geht es. Ich würde aber gerne dieses Script in eine extra JS Datei auslagern und dann nur den "aktiven" Teil in dem HTML verknüpfen. Oder ist dass der falsche Weg?
Ich könnte jetzt natürlich allen Code in einem Script-Block zusammenpressen und irgendwie das Problem umgehen. Ist aber ja auch nicht sinnvoll.
<!DOCTYPE HTML>
<html>
<head>
<script src="/EditTemplate/jquery-3.5.0.js"></script>
<!-- Script zur Farbänderung mit kontrastierenden Farben -->
<script>
$(document).ready(function(){
farbwechsler("#00ff55", "schrift");
farbwechsler("#323115", "schrift2");
//************rgb-Werte aus hex holen
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
//***********relative Helligkeit von r,g,b bestimmen
function Brightness(r, g, b)
{
return Math.sqrt(
r * r * .241 +
g * g * .691 +
b * b * .068);
}
//****************Textfarbe je nach Schwellwert zurückgeben
function textfarbe(helligkeit){
if (helligkeit >= 130){return 'black'}
if (helligkeit < 130){return 'white'}
}
function farbwechsler(farbe, element){
var aktfarbe = farbe;
var element = element;
var R = hexToR(aktfarbe);
var G = hexToG(aktfarbe);
var B = hexToB(aktfarbe);
document.getElementById(element).style.backgroundColor = aktfarbe;
document.getElementById(element).style.color = textfarbe(Brightness(R,G,B));
}
})
</script>
<!-- Script zur AJAX Abfrage der Daten einer Farbkombination -->
<script>
var requestURL = 'https://example.com/coloring/api/colorinfo/'+#(FileID)+'/'+#(FileID)+'/0';
// example.com aufgrund der Nutzungsbedingungen gesetzt
var xhr = new XMLHttpRequest();
xhr.open('GET', requestURL);
xhr.responseType = 'json';
xhr.send();
xhr.onload = function() {
var colorAPI = xhr.response;
// Zellfarben und Farbnamen laden, mit Try eingegrenzt um Fehler zu verhindern, da nicht immer alle Farben gefüllt sind. Lösung mit Schleife ggfs. später implementieren
try{
document.getElementById('warp_1_cell').bgColor = colorAPI['WarpList'][0]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('warp_1').value = colorAPI['WarpList'][0]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_1_cell').bgColor = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_1').value = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_2_cell').bgColor = colorAPI['WeftList'][1]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_2').value = colorAPI['WeftList'][1]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_3_cell').bgColor = colorAPI['WeftList'][2]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_3').value = colorAPI['WeftList'][2]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_4_cell').bgColor = colorAPI['WeftList'][3]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_4').value = colorAPI['WeftList'][3]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_5_cell').bgColor = colorAPI['WeftList'][4]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_5').value = colorAPI['WeftList'][4]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_6_cell').bgColor = colorAPI['WeftList'][5]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_6').value = colorAPI['WeftList'][5]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_7_cell').bgColor = colorAPI['WeftList'][6]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_7').value = colorAPI['WeftList'][6]['ColorList'][0]['ColorItem']['Name'];
document.getElementById('weft_8_cell').bgColor = colorAPI['WeftList'][7]['ColorList'][0]['ColorItem']['Color'];
document.getElementById('weft_8').value = colorAPI['WeftList'][7]['ColorList'][0]['ColorItem']['Name'];
}catch(e){
}
}
</script>
<!-- Hier bekomme ich immer einen Fehler in der Konsole, da er hier die Funktion aus dem oberen Script-Bereich nicht erkennt. Eigentlich ist der Plan dies in das AJAX Script für die JSON Abfrage zu integrieren, da der Rückgabewert den ersten Parameter darstellt. -->
<script>
farbwechsler("#00ff55", "schrift");
farbwechsler("#323115", "schrift2");
</script>
</head>
<body>
<!-- aus Gründen der Übersichtlichkeit den Teil mit der Tabelle entfernt. -->
<div id="schrift"><h1>Schriftfarbe dynamisch</h1></div>
<div id="schrift2"><h1>Schriftfarbe dynamisch</h1></div>
</body>
</html>Herzlichen Dank schon jetzt für euer Hirnschmalz
Liebe Grüße
Christian
