Hintergrund mir RGB eingabe verändern.

[Simsso]

Die Idee ist, den Hintergrund des DIV Containers mit hilfe der drei INPUT Felder zu verändern.
Leider funktioniert der folgende Code nicht.
Könnte ihr Fehler finden?
<div name="box" style="height: 50px; width: 50px; background-color: rgb(127,127,127); "></div>
<input name="r" type="text" onchange="javascript: var rgb = 'rgb('+document.r+','+document.g+','+document.b+')';document.box.style.backgroundColor=rgb;" />
<input name="g" type="text" onchange="javascript: var rgb = 'rgb('+document.r+','+document.g+','+document.b+')';document.box.style.backgroundColor=rgb;" />;" />
<input name="b" type="text" onchange="javascript: var rgb = 'rgb('+document.r+','+document.g+','+document.b+')';document.box.style.backgroundColor=rgb;" />
Gruß

[ChrisB]

Hi,

Leider funktioniert der folgende Code nicht.
Könnte ihr Fehler finden?

Ja. Und das solltest du auch können, wenn du nur mal einen Blick in die Fehlerkonsole deines Browsers wirfst.

MfG ChrisB

[Simsso]

Hi,

Ja. Und das solltest du auch können, wenn du nur mal einen Blick in die Fehlerkonsole deines Browsers wirfst.

Da steht document.box ist undefiniert, aber was heißt das?
gruß

[ChrisB]

Hi,

Ja. Und das solltest du auch können, wenn du nur mal einen Blick in die Fehlerkonsole deines Browsers wirfst.

Da steht document.box ist undefiniert, aber was heißt das?

Das du dich mit den Grundlagen des Ansprechens von Elementen per JavaScript beschäftigen solltest.

MfG ChrisB

[MudGuard]

Hi,

<div name="box" style="height: 50px; width: 50px; background-color: rgb(127,127,127); "></div>

Wie kommst Du darauf, daß div-Elemente ein name-Attribut haben könnten?

<input name="r" type="text" onchange="javascript: var rgb = 'rgb('+document.r+','+document.g+','+document.b+')';document.box.style.backgroundColor=rgb;" />

Bist Du sicher, daß auf magische Weise eine r-Eigenschaft im document entsteht, nur weil Du ein Element mit name-Attribut "r" anlegst? Und daß diese den value des inputs mit name="r" enthält, statt das object selbst?
Selbst wenn document.r existieren sollte, müßte das doch eher das input-Element insgesamt sein, statt nur dessen value.

Dito für "g" und "b"

Und wo soll document.box herkommen?

cu,
Andreas

[molily]

Hallo,

Könnte ihr Fehler finden?

Da sind verschiedene Fehler drin.

<div name="box" style="height: 50px; width: 50px; background-color: rgb(127,127,127); "></div>

div-Elemente haben kein name-Attribut. Du kannst hier jedoch ein id-Attribut verwenden.
Siehe:
SELFHTML: Universalattribute
SELFHTML: Attributreferenz

Wenn du ein Element mit einer ID versehen hast, kannst du es in JavaScript einfach über document.getElementById('dieID') ansprechen.
Siehe SELFHTML: document.getElementById

<input name="r" type="text" onchange="javascript: var rgb = 'rgb('+document.r+','+document.g+','+document.b+')';document.box.style.backgroundColor=rgb;" />

Ich weiß nicht, wie du darauf gekommen bist, aber über »document.r« lässt sich in JavaScript kein Formularfeld ansprechen, welches name="r" hat. Und »document.box« spricht auch kein div-Element an, welches name="box" hat (was wie gesagt ohnehin kein erlaubtes Attribut ist).

Du kannst hier getElementById verwenden bzw. verschiedene Möglichkeiten, um auf Formularfelder zuzugreifen. Wählst du die zweite Möglichkeit, so kannst du mit einem form-Element mit einem name-Attribut arbeiten sowie mit den name-Attributen der input-Elemente.
Siehe: SELFHTML: document.forms.x.elements.y

Wenn du z.B. mit getElementById ein Formularfeld angesprochen hast, so bekommst du den aktuellen Wert mithilfe der value-Eigenschaft.
Siehe SELFHTML: input.value

Du könntest damit auf so etwas kommen:

<div id="box">  
<input type="type" id="color-r" onchange="setzeHintergrund()">  
<input type="type" id="color-g" onchange="setzeHintergrund()">  
<input type="type" id="color-b" onchange="setzeHintergrund()">  
</div>  
  
<script type="text/javascript">  
[code lang=javascript]function setzeHintergrund () {  
  var r = document.getElementById('color-r').value;  
  var g = document.getElementById('color-g').value;  
  var b = document.getElementById('color-b').value;  
  var box = document.getElementById('box');  
  box.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';  
}

</script>[/code]

Mathias