[JavaScript] <img> in label einfügen

[Boron]

Hallo,

habe folgenden Code:

<select name="WeltmeisterTipp">
<option value='Argentinien' onclick="BildWeltmeisterTipp('ARG')">Argentinien (ARG)</option>
</select>

<label id="BildWeltmeisterTipp">&nbsp;</label>

und das JavaScript:

function BildWeltmeisterTipp(Land) {

document.getElementById("BildWeltmeisterTipp").firstChild.data = "<img src=\"pics/flag_"+Land+".gif\">";

}

Nach Anklicken eines Landes aus dem Dropdownmenü soll mir also die Flagge daneben angezeigt werden (mit einem label).

Als Ausgabe bekomme ich jedoch nur:

<img src="pics/flag_ARG.gif">

... und nicht das eigentliche Bild bzw. dessen HTML-Umsetzung.

Wie muss es also richtig heißen?

[Rumo]

Hmm... interessant!

Beschäftige dich noch mal genauer mit dem DOM, besonders hiermit und damit

was du machst, ist, den inhalt des elements auf <img src="pics/flag_ARG.gif"> zu setzen und nicht dieses element neu hinzuzufügen...
ich finde es ur interessant, dass der Browser die beiden Tag-Klammern ja offenbar als &lt; und &gt; interpretiert.

[Boron]

Mit [FONT=courier new]document.getElementById("BildWeltmeisterTipp").firstChild.nodeValue[/FONT] wie es auf http://de.selfhtml.org/dhtml/modelle...elementinhalte beschrieben ist, funktioniert es leider auch nicht.

Übrigens zeigt nur der FireFox [FONT=courier new]<img src="pics/flag_ARG.gif">[/FONT] an. Der IE tut gar nichts (auch keine Fehlermeldung in der Statusleiste).

[Rumo]

1. Der IE kennt <label> glaub ich auch gar nicht, ist im allgemeinen eh nicht zu empfehlen. versuch mal lieber <div> oder so.

2. Dein Beispiel sollst du ja auch mit createElement() lösen, der andere Link war bloß, weil du mit diesem komischen .data arvbeitest.

[Boron]

Ich habe bereits <label> durch <span> ersetzt... genau wie im o.g. Beispiel. Also wüsste ich nicht, wieso ich einen neuen Knoten erzeugen soll?

[Rumo]

Damit ein IMG-"Knoten" existiert!?!

[Boron]

Ich habe das jetzt doch ein wenig anders gemacht:

<select name="WeltmeisterTipp">
  <option value="Argentinien" onclick="BildWeltmeisterTipp('ARG')">Argentinien (ARG)</option>
</select>

<img id="imgWeltmeisterTipp" src="pics/flag_.gif">

JavaScript:

function BildWeltmeisterTipp(Land) {
document.getElementById("imgWeltmeisterTipp").setAttribute("src", "pics/flag_" + String(Land) + ".gif");
}

Funktioniert... aber nur im FireFox!

Ich habe mehrere "Tests" gemacht, und mir scheint, dass der IE das onclick-Event überhaupt nicht ausführt, in dem Dropdownmenü!? Woran liegt das? Wie kann ich das beheben?

[wahsaga]

Original geschrieben von Boron
Ich habe mehrere "Tests" gemacht, und mir scheint, dass der IE das onclick-Event überhaupt nicht ausführt, in dem Dropdownmenü!? Woran liegt das?

daran, dass der IE buggy ist, und onClick für option nicht unterstützen mag.

Wie kann ich das beheben?

nutze onChange auf dem select, o.ä.

[Shurakai]

Original geschrieben von Rumo
1. Der IE kennt <label> glaub ich auch gar nicht, ist im allgemeinen eh nicht zu empfehlen. versuch mal lieber <div> oder so.

Natürlich kennt er das. Und wieso ist das nicht zu empfehlen? Ich würde sogar sagen: SEHR empfehlenswert!

[Boron]

nutze onChange auf dem select

Danke! Jetzt tut's.

<select name="WeltmeisterTipp" onChange="BildWeltmeisterTipp()">
  <option value="ARG">Argentinien (ARG)</option>
</select>

<img id="imgWeltmeisterTipp" src="pics/flag_.gif">

function BildWeltmeisterTipp() {

var Land = document.WeltmeisterTippForm.WeltmeisterTipp.value;
document.getElementById("imgWeltmeisterTipp").setAttribute("src", "pics/flag_" + String(Land) + ".gif");

}

[wahsaga]

Original geschrieben von Boron
Danke! Jetzt tut's.

OffTopic:

---

dann warte ich jetzt gespannt auf den moment, wenn er merkt, dass value für select im IE doch nicht "funzt" ...

---

[Boron]

??

Ich seh doch, dass es funktioniert... ^^
Die Bilder werden mir doch angezeigt!?

[Rumo]

Original geschrieben von Shurakai
Natürlich kennt er das. Und wieso ist das nicht zu empfehlen? Ich würde sogar sagen: SEHR empfehlenswert!

OK... ich sagte ja "glaub ich", weil mein Kleinhirn mir irgendetwas in der Richtung "du verwchselst das mit <layer>" zugeflüdtert hat...
sorry

[wahsaga]

Original geschrieben von Boron
Ich seh doch, dass es funktioniert... ^^
Die Bilder werden mir doch angezeigt!?

auch im IE ...? richtig ...?

wundert mich. soweit ich weiß, kennt der value für select nämlich nicht, und man muss stattdessen über das value der selektierten option gehen ...