Über select aktion ausführen
0 
Der Martin
0 0 
tk
0 Der Martin
Über select aktion ausführen
Hallo,
ich habe folgenden Code:
<html>
<body>
<select name="select">
<option name="r" value="red">Rot</option>
<option name="b" value="blue">Blau</option>
<option name="g" value="green">Grün</option>
</select>
<div style="background-color: black; height: 50; width: 50; " />
</body>
</html>
Und ich möchte mit JavaScript erreichen, dass ohne ein neuladen der Seite bei der Auswahl einer der Optionen die Farbe des Div containers geändert wird. Also wenn man oben Rot auswählt, dass der Container dann "red" wird.
Wisst ihr wie das geht?
Wäre nett, wenn ihr dann den funktionierenden Code posten könntet!
Liebe Grüße und schönes Wochenende
Simsso
-
Hi,
ich möchte mit JavaScript erreichen, dass ohne ein neuladen der Seite bei der Auswahl einer der Optionen die Farbe des Div containers geändert wird. Also wenn man oben Rot auswählt, dass der Container dann "red" wird.
du brauchst also einen Eventhandler, am besten wohl onchange, den du an das select-Element klebst. In der Eventhandler-Funktion bestimmst du den Index des ausgewählten Eintrags, holst dir damit dessen value-Eigenschaft und setzt davon abhängig einen Eintrag für die Farbe im style-Objekt des select-Elements.
Noch besser: Manipuliere nicht direkt style, sondern gib dem Element eine Klasse. Dann kannst du die tatsächliche Formatierung ordentlich im Stylesheet vornehmen.<div style="background-color: black; height: 50; width: 50; " />
Das ist kein gültiges CSS. 50 Streichhölzer hoch und 50 Grashalme breit?
Wäre nett, wenn ihr dann den funktionierenden Code posten könntet!
Wäre nett, wenn du selbst ein wenig mitmachen könntest. Anregungen dazu hast du nun bekommen.
Jetzt bist du wieder dran.Ciao,
Martin--
Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi Simsso,
Martin hat eigentlich schon alles gesagt. Noch schnell ein genereller Tipp, lass deinen Code vom w3c-Validator checken. Dann würde dir auch auffallen, dass das schließende "</div>" fehlt. "<div/>" gibt es nicht.Gruß Metalgurke
-
Hallo,
Noch schnell ein genereller Tipp, lass deinen Code vom w3c-Validator checken. Dann würde dir auch auffallen, dass das schließende "</div>" fehlt. "<div/>" gibt es nicht.
Sagt wer? Der Validator beschwert sich darüber jedenfalls nicht ...
Gruß,
Tobias-
Hallo,
Noch schnell ein genereller Tipp, lass deinen Code vom w3c-Validator checken. Dann würde dir auch auffallen, dass das schließende "</div>" fehlt. "<div/>" gibt es nicht.
Sagt wer? Der Validator beschwert sich darüber jedenfalls nicht ...
Gruß,
TobiasWie Martin schon sagte, als XHTML-Dokument wäre es korrekt (würde aber wenig Sinn machen), als HTML4-Dokument wäre es nicht valide. Davon mal abgesehen, sollte man seinen Code immer durch den W3C-Validator jagen, dann würde nämlich ebenfalls auffallen, dass das <header>-Tag fehlt. :)
-
-
Hallo,
Dann würde dir auch auffallen, dass das schließende "</div>" fehlt. "<div/>" gibt es nicht.
in der Theorie wäre das für XHTML sogar richtig und gültig. Aber die Browser, die üblicherweise ihren HTML-Tagsoup-Parser verwenden, begreifen das dann nicht. Abgesehen davon ist ein leeres div-Element semantischer Unfug.
Ist mir aber tatsächlich nicht aufgefallen; danke für den Hinweis.
Ciao,
Martin--
Einer aktuellen Erhebung zufolge sind zehn von neun Ehefrauen eifersüchtig auf ihren Mann.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-