Hintergrundfarbe per Eingabe

Auf dieser Seite stelle ich Schritt für Schritt ein paar Möglichkeiten vor, wie man mit Textfeldern und Buttons in Formularen die Hintergrundfarbe ändert. Ich habe hier im Großen und Ganzen auf Erklärungen verzichtet, da alle Themen zuvor abgehandelt wurden. Zu jedem Beispiel habe ich den Javascript Quelltext nochmal extra beigefügt. Die Funktionen, zwischen den Script Tags aus dem Head Bereich erscheinen jeweils oberhalb des Formulars. Der Quelltext des Formulars steht darunter.

Die Hintergrundfarbe wird in Javascript mit folgendem Befehl geändert:
document.bgColor="00ff00";
Die Angabe erfolgt in Hexadezimal Werten, allerdings ohne das Gatterzeichen (#).
Der Wert muß in jedem Fall in Anführungszeichen stehen. In einigen Beispielen tut er das nicht, weil es sich um Zeichenketten handelt, die dynamisch konstruiert werden oder aus Textfeldern stammen.

Der Eingabewert eines Textfeldes namens meintextfeld aus dem Formular namens meinformular kann folgendermaßen zugewiesen werden:
document.meinformular.meintextfeld.value



Beispiel 1

function farbegreen() {
document.bgColor="E3DABB";
document.form1.bgfarbe.value=document.bgColor;
}

Buttonklick ändert die Farbe, dann erscheint sie im Textfeld als Hexadezimalwert.


<form name="form1">
<input type="text" name="bgfarbe" size="10">
<input type="button" value="Farbe beige" onClick="farbegreen()">
</form>


Beispiel 2

function eingabefarbe() {
document.bgColor=document.form2.farbfeld.value;
document.form1.bgfarbe.value=document.bgColor;
}


Gebe hier einen Hexadezimalwert für die Hintergrundfarbe ein, z.B.: C0FFEE BACAD1 CACCA0 5AEFDE


<form name="form2">
<input type="text" name="farbfeld" size="10">
<input type="button" value="Hexwert eingeben" onClick="eingabefarbe()">
</form>


Beispiel 3

function graustufen() {
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var x1 = 0, x2 = 0;

for(i = 0; i < document.form3.graufeld.value; i++){
document.bgColor = X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
status=i;
x2 = x2 + 1;
if(x2 % 16 == 0) {
x2 = 0;
x1 = x1 + 1;
}
}
}


Gebe hier eine Graustufe von 1 bis 255 ein.


<form name="form3">
<input type="text" name="graufeld" size="5">
<input type="button" value="Graustufe eingeben" onClick="graustufen()">
</form>

Erklärung:
Ich gehe davon aus, dass Farbangaben in Html mittels Hexadezimalwert Grundwissen ist, ansonsten siehe selfhtml
Das Beispiel blendet die Hintergrundfarbe von Schwarz über Graustufen nach Weiß ein. Dazu wird ein Array X definiert, in dem die Hexadezimalziffern 0 bis 9 und A bis F gespeichert werden. In einer for-Schleife wird von 0 bis höchstens 255 gezählt. Der Grund ist, daß 255 der maximale Wert (dezimal gesehen) eines RGB-Farbwerts sein kann. Innerhalb der Schleife wird der Eigenschaft document.bgColor jeweils ein neuer Wert zugewiesen. Dabei wird aus den zuvor definierten Ziffern das Arrays X eine gültige Farbangabe konstruiert.

Die For Schleife
for(i = 0; i < document.form3.graufeld.value; ++i){Anweisungen}
Bei jedem Schleifendurchlauf wird zu i eine 1 hinzuaddiert i++ man könnte auch schreiben i=i+1
Die Schleife beginnt bei 0, i=0 und endet bei dem eingegebenen Wert i<document.form3.graufeld.value
status=i zeigt bei jedem Schleifendurchlauf die Werte von i in der Statuszeile an. Das ist nicht unbedingt erforderlich.
x2=x2+1 Bei jedem Schleifendurchlauf wird der Wert der Variablen x2 um 1 erhöht.
Das würde bedeuten, das x2 am Ende den eingebenen Wert erreicht hätte. i<werteingabe
Allerdings folgt nun eine if Bedingung, denn wenn x2 durch 16 teilbar ist (siehe Modulo) , wird ihr Wert auf 0 gesetzt x2=0
und der Variablen x1, die bei 0 beginnt, wird eine 1 hinzuaddiert x1=x1+1
Das bedeutet, sobald die if Bedingung der erste mal erfüllt ist, also bei Wert 16, ist: x1=1 und x2=0
Die dezimale Zahl 16 entspricht der hexadezimalen Zahl 10.
x1 und x2 wird die erste und zweite Stelle der Hexadezimalzahl zugewiesen und zwar mittels des zuvor erzeugten Arrays, namens groß X
Daher würde bei 32 (wenn die if Bedingung das zweite mal erfüllt ist) die entsprechende Zahl 20 hexadezimal erzeugt. x1=2 und x2=0

Mittels document.bgColor wird die Hintergrundfarbe erzeugt.
x1 und x2 erzeugen jeweils die beiden Stellen der Farben rot grün blau
und zwar wird die Hexadezimal Angabe aus dem Array mittels der Zahlenwerte aus den Variablen x1 und x2 zugewiesen.
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
Da bei Grauwerten alle drei Werte gleich sind lautet die Zuweisung
X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2]

Wer es noch nicht kapiert hat kann ja mal ein paar Zahlen durchspielen. z.B.
Zahl 60 Die if Bedingung wurde dreimal erfüllt bei 16 bei 32 und 48
dadurch ist x1=3
Die Zahl 3 als dezimal Wert und ihr Hexwertzeichen ist das selbe.
x2 wurde bei 48 auf 0 gesetzt und steht nun auf 12
Also wird bei x2 der Hexwert c übergeben.
dezimal 60 entspricht hex 3c

Die nächste Formel funktioniert nach dem gleichen Prinzip, nur dass wir hier für alle 3 Farben verschiedenen Schleifen erzeugen.
Außerdem wird der Befehl document.bgColor hinter die Prozedur gesetzt, dadurch ändert sich die Hintergrundfarbe erst wenn die Schleifen durchlaufen sind.


Beispiel 4

function rgbfarben() {
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var r1 = 0, r2 = 0, g1 = 0, g2 = 0, b1 = 0, b2 = 0;

for(r = 0; r < document.form4.rfeld.value; r++){
r2 = r2 + 1;
if(r2 % 16 == 0) {
r2 = 0;
r1 = r1 + 1;
}
}

for(g = 0; g < document.form4.gfeld.value; g++){
g2 = g2 + 1;
if(g2 % 16 == 0) {
g2 = 0;
g1 = g1 + 1;
}
}


for(b = 0; b < document.form4.bfeld.value; b++){
b2 = b2 + 1;
if(b2 % 16 == 0) {
b2 = 0;
b1 = b1 + 1;
}
}

document.bgColor = X[r1] + X[r2] + X[g1] + X[g2] + X[b1] + X[b2];
}


Gebe hier in die Farbfelder jeweils RGB-Werte von 0 bis 255 ein.

 Rot    Grün    Blau


<form name="form4">
<input type="text" name="rfeld" size="5">
<input type="text" name="gfeld" size="5">
<input type="text" name="bfeld" size="5">
<input type="button" value="RGB eingeben" onClick="rgbfarben()">
</form>


es folgt ein Linkmenue mit einer Formular Auswahlliste