[FRAGE] Mehrere Variablen im Bild ändern

[Nyoko21]

Hallo, ich hab eine kurze Frage.
Ich wollte ein Bild mit 2 Variablen ändern.

Aktuell sieht es so aus:

<select id="frisur">
  <option value="frisur_" id="frisur">Frisur 1</option>
  <option value="frisur1_" id="frisur">Frisur 2</option>
  <option value="frisur2_" id="frisur">Frisur 3</option>
</select>

<select id="farbe">
  <option value="1" id="farbe">Rot</option>
  <option value="2" id="farbe">Braun</option>
  <option value="3" id="farbe">Schwarz</option>
</select>

<img src="avatar/frsiurvariable_farbevariable.png" /> (So ist das Bild aufgebaut)

<img src="avatar/frisur_1.png" /> (So solls am Ende aussehen)

Es soll per OnChange oder ähnliches weitergegeben werden, damit frisur und farbe ausgewählt werden und das Bild dementsprechend angezeigt werden.
Leider konnte ich bis jetzt keine Variable übertragen.

<script> 
	var a = "frisur_";
	var b = 1; 	
	document.write('<img src="avatar/' + a + b + '.png" />');
</script>

Das hatte ich zum testen, um ein Bild im Javascript "zusammen zu bauen", leider ist es mir nicht gelungen var a und var b durch eine select Auswahl zu ändern.
Weder so

var a = document.getElementById('frisur').src;

noch ähnliches.

Ich bin für jeden Ratschlag dankbar.

Ich kann mittels OnChange oder Onclick (je nach dem was ich benötige) ein Bild austauschen, aber bei einem zusammengesetztes Bild verzweifel ich leider.

Ich danke euch schonmal für eure Hinweise.

 

[j-l-n]

document.write('<img src="avatar/' + a + b + '.png" />');

Trenn dich am besten gleich von document.write! Das ist ein extreeem schlechter Stil und führt zu Problemen.
javascript - Why is document.write considered a "bad practice"? - Stack Overflow

var a = document.getElementById('frisur').src;

noch ähnliches.

Was ist "ähnliches"? Wieso greifst du auch auf ".src" zu? Das select-Menü hat doch nirgendwo ein derartiges Attribut...

Ich kann mittels OnChange oder Onclick (je nach dem was ich benötige)

Die beiden Eventhandler gibt es nicht! Sie funktionieren nur, weil HTML case-insensitive ist. In JS gibt es nur onchange und onclick.

 

[Nyoko21]

Mit OnChange arbeite ich, wenn ich das Bild per Select ändere und mit OnClick arbeite ich, wenn man was mit Radiobutton auswählt.
Okay, document.write werde ich in Zukunft nicht nutzen.

Und ähnliches war mit einer function.
So in etwa:

<script type="text/javascript">
	function wechsel(select){
	document.getElementById("frisur").src = select.options[select.options.selectedIndex].value;
		return true;
   }
</script>

Aber da tauscht er im Bild gleich das gesamte src="" aus, statt nur den Frisuren teil.

Daher ja die Frage, ob es mit OnChange möglich ist, beide Teile auszuwählen, um sich das Bild zusammen zu setzen.

 

[j-l-n]

Mit OnChange arbeite ich, wenn ich das Bild per Select ändere und mit OnClick arbeite ich, wenn man was mit Radiobutton auswählt.

Nochmal: Es gibt kein OnChange und OnClick! Es gibt nur ein onchange und onclick...

Daher ja die Frage, ob es mit OnChange möglich ist, beide Teile auszuwählen, um sich das Bild zusammen zu setzen.

Ja, dazu musst du die Werte jeweils in einer Variable speichern und das Ganze dann zusammenbauen. Also ähnlich

//in var select1 wurde der Teil aus dem ersten Menü gespeichert, in select2 der vom zweiten
document.getElementById("ID des Bilds").src = select1 + select2;

 

[Nyoko21]

Ich verstehe was du meinst. Ich hab das jetzt so geändert.

<script type="text/javascript">
function frisuraendern(target){
    frisur = target.value;
}
function frisurfarbe(target){
    farbe = target.value;
}
	document.getElementById("avatar").src = frisur + farbe;
</script>

<select id="frisur" onchange="frisuraendern(this)">
  <option value="frisur_" id="frisur">Frisur 1</option>
  <option value="frisur1_" id="frisur">Frisur 2</option>
  <option value="frisur2_" id="frisur">Frisur 3</option>
</select>

<select id="farbe" onchange="frisurfarbe(this)">
  <option value="1" id="farbe">Rot</option>
  <option value="2" id="farbe">Braun</option>
  <option value="3" id="farbe">Schwarz</option>
</select>

<img src="frisur_1.gif" id="avatar" />

Mittels alert(frisur) und alert(farbe) hab ich den Inhalt geprüft. Wenn man etwas auswählt, wird es übertragen. Leider besteht noch das Problem, dass ich das Bild nicht ändern kann.
Wahrscheinlich bin ich wieder mal zu doof dafür.

 

[j-l-n]

Man verwendet keine globalen Variablen! Also immer das Schlüsselwort var verwenden!

Du verwendet auch target.value falsch, denn du musst zuerst über document.getElementById darauf zugreifen:

<script>
  function update_avatar(){

    var frisur = document.getElementById("frisur");
    var frisur = frisur.options[frisur.selectedIndex].value;

    var farbe = document.getElementById("farbe");
    var farbe = farbe.options[farbe.selectedIndex].value;

    document.getElementById("avatar").src = frisur + farbe;
</script>

<select id="frisur" onchange="update_avatar()">
  <option value="frisur_" id="frisur">Frisur 1</option>
  <option value="frisur1_" id="frisur">Frisur 2</option>
  <option value="frisur2_" id="frisur">Frisur 3</option>
</select>

<select id="farbe" onchange="update_avatar()">
  <option value="1" id="farbe">Rot</option>
  <option value="2" id="farbe">Braun</option>
  <option value="3" id="farbe">Schwarz</option>
</select>

<img src="frisur_1.gif" id="avatar" />

 

[kkapsner]

@Julian: das "target" ist schon richtig, da das geänderte Element ja im Funktionsaufruf per this übergeben wird.

Zusätzlich ist das Kunstrukt SELECT.options[SELECT.selectedIndex].value unnötig kompliziert: SELECT.value

PS: IDs müssen dokumentenweit eindeutig sein. Alle <option>s je in den <select>s haben die gleiche ID...
PPS: @Nyoko21: bei deinen Gehversuchen solltest du einiege Meldungen in der Fehlerkonsole bekommen haben. Die ist extrem praktisch bei der Fehlersuche.

 

[j-l-n]

@Julian: das "target" ist schon richtig, da das geänderte Element ja im Funktionsaufruf per this übergeben wird.

Zusätzlich ist das Kunstrukt SELECT.options[SELECT.selectedIndex].value unnötig kompliziert: SELECT.value

Ja, stimmt. Mein Fehler.

PS: IDs müssen dokumentenweit eindeutig sein. Alle <option>s je in den <select>s haben die gleiche ID...

Ist mir auch gerade aufgefallen. Schließlich trägt ja eine ID auch nicht zu unrecht den Namen eines eindeutigen Identifikators.