[JS] Der Farbtester - Variabeln werte übergeben

taffrot · 17.10.2009

Hallo zusamm,

also ich soll eine javascript anwendung schreiben die Folgendes tut (ein bild):

Also, beim klick auf den button soll sich die Hintergrundfarbe ändern.
Ich bekomms einfach nicht hin, ich muss auch sagen dass ich eigentlich mit C++ programmiere und ich somit mit JS nicht so klarkomme.

Code:

        <input type="text" id="farbe" value="FFFFFF" onclick="this.value='';"/>
        <input type="button" value="Hintergrundfarbe ändern" onclick="document.getElementById('javascript').style.backgroundColor='document.getElementById('farbe').value';"/>

//externe js datei mit der funktion
 function Start() {
var Farbe = document.getElementById("farbe").innerHTML;
 }

ich habs so versucht

Wäre sehr Dankbar

grüße

sokie · 17.10.2009

AW: [JS] Der Farbtester - Variabeln werte übergeben

Code:

var Farbe = document.getElementById("farbe").innerHTML;

das Element mit der ID 'farbe' (input) hat kein innerHTML es hat aber ein value, auf das man zugreifen kann.

Code:

onclick="document.getElementById('javascript').style.backgroundColor='document.getElementById('farbe').value';"

gibt es tatsächlich ein element mit der ID 'javascript' ?
(es ist zwar nicht ganz unmöglich so etwas zu machen, aber 'javascript' eignet sich nicht wirklich als ID-Name).

value="FFFFFF" reicht nicht für eine Farbe (#FFFFFF)

"#" + Farbe;
möglich wäre so etwas:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<script type="text/javascript">
    function wechsleBgFarbe(){
      var Farbe = document.getElementById("farbe").value;
      document.getElementsByTagName("body")[0].style.background = "#" + Farbe;
    }
</script>
<title></title>
</head>

<body>
        <input type="text" id="farbe" value="FFFFFF" onclick="this.value='';" />
        <input type="button" value="button" onclick="wechsleBgFarbe();" />
</body>
</html>

wobein man vorher prüfen sollte,ob der User das "#" eingegeben hat oder nicht.

taffrot · 17.10.2009

AW: [JS] Der Farbtester - Variabeln werte übergeben

edit2: danke geht

netbandit · 17.10.2009

AW: [JS] Der Farbtester - Variabeln werte übergeben

Ist ein array, Javascript geht davon aus, dass es mehrere gibt/geben kann

saila · 17.10.2009

AW: [JS] Der Farbtester - Variabeln werte übergeben

Und um genau zu sein, müsste noch ein Regex hinzugefügt werden. Dieser prüft die Eingabe 0-9 und a-f, da die Farbscala nur über diese Werte erzeugt werden kann. Stichwort ist hierzu exec() für JavaScript. Und es müssten mind. 3 Werte angegeben werden. Die Raute kann man weglassen oder zumindest vor den input-tag stellen. Somit ist schon mal sichergestellt, das diese nicht eigens eingegeben werden muss.