JavaScript Mit "onchange" Farben ändern

[Schnipp]

Hallo zusammen,

ich bin absoluter Neuling in Sachen JS und versuche mich an ein paar Beispielen, die ich im Netz gefunden habe. An einer Stelle komme ich nun nicht weiter. Folgendes Szenario:

Es gibt 3 farbige Quadrate (DIVs mit entsprechender Hintergrundfarbe, die über eine Klasse im CSS mitgegeben wird). Darunter 3 Select-Felder, für jede Box eine. Dort stehen die aktuellen Farbwerte der Boxen drin. Wenn nun der Farbwert in einer der Boxen geändert wird, dann soll die entsprechende Box die ausgewählte Farbe annehmen.

Ich weiß, dass ich mit mit onchange arbeiten muss, aber eine Sache weiß ich leider nicht: in der Aufgabe heißt es, dass ich per if-else-statement prüfen soll, welche der Checkboxen geändert wurde. Wie mache ich das denn dann?

Gruß Schnipp

 

[IKäsebrot]

Deinen Code (bzw. HTML + Script) bitte!

 

[Schnipp]

<form id="colorForm" action="select.html"> 
Farbe für Links: 
<select id="colorLeft" size="1"> 
	<option value="red">Rot</option> 
	<option value="green">Grün</option> 
	<option value="blue">Blau</option> 
	<option value="yellow">Gelb</option>
</select><br>
Farbe für Mitte: 
<select id="colorMiddle" size="1"> 
	<option value="red">Rot</option> 
	<option value="green">Grün</option> 
	<option value="blue">Blau</option> 
	<option value="yellow">Gelb</option>
</select><br>
Farbe für Rechts: 
<select id="colorRight" size="1"> 
	<option value="red">Rot</option> 
	<option value="green">Grün</option> 
	<option value="blue">Blau</option> 
	<option value="yellow">Gelb</option>
</select> 
</form> 

<script type="text/javascript">
	var bg = document.getElementById('colorLeft');
	bg.onchange = function() {
		var links = document.getElementById('links');
		links.className = this.value;
	}
</script>

Oben das ist die Vorgabe in der HTML-Datei. Der Script-Teil ist von mir als Beispiel für das linke Element erstellt worden. Da fehlt mir eben der Ansatz, wie ich mit einer Variablen für das jeweils geänderte Element arbeiten soll.

 

[IKäsebrot]

Fehlen noch die CSS Klassen.

 

[Schnipp]

Uuups, stimmt:

Das hier sind noch die farbigen Boxen:

<div id="links" class="green">LINKS</div>
<div id="mitte" class="pink">MITTE</div>
<div id="rechts" class="red">RECHTS</div>

Und das passende CSS dazu:

.green {background-color: green;}
.pink {background-color: pink;}
.red {background-color: red;}
.blue {background-color: blue;}
.yellow {background-color: yellow;}

 

[IKäsebrot]

Ich habe deine HTML etwas abgeändert und jedem 'select'-Element die Methode selectionChanged(e) zugewiesen.

    Farbe für Links:
    <select id="colorLeft" size="1" onchange="selectionChanged(this);">
        <option value="red">Rot</option>
        <option value="green">Grün</option>
        <option value="blue">Blau</option>
        <option value="yellow">Gelb</option>
    </select><br>
    Farbe für Mitte:
    <select id="colorMiddle" size="1"  onchange="selectionChanged(this);">
        <option value="red">Rot</option>
        <option value="green">Grün</option>
        <option value="blue">Blau</option>
        <option value="yellow">Gelb</option>
    </select><br>
    Farbe für Rechts:
    <select id="colorRight" size="1" onchange="selectionChanged(this);">
        <option value="red">Rot</option>
        <option value="green">Grün</option>
        <option value="blue">Blau</option>
        <option value="yellow">Gelb</option>
    </select>
    <div id="links" class="green">LINKS</div>
    <div id="mitte" class="pink">MITTE</div>
    <div id="rechts" class="red">RECHTS</div>

Und hier deine Methode, einfach in den Script-Block kopieren:

        function selectionChanged(e) {
            var selectorId = e.id; //Die Id des select-Elements wird aus dem Aurgument ausgelesen. 

            switch (selectorId) { //Anhand der Id wird dem jeweiligen 'div' die ausgeweählte CSS-Klasse zugewiesen
                case 'colorLeft':
                    document.getElementById('links').className = e.value;
                    break;
                case 'colorMiddle':
                    document.getElementById('mitte').className = e.value;
                    break;
                case 'colorRight':
                    document.getElementById('rechts').className = e.value;
                    break;
                default:

            }
        }

Habe mich hier für einen 'Switch'-Block entschieden statt 'if' zu verwenden. Hoffe das ist kein Problem, lässt sich aber auch leicht umschreiben falls doch.

Viel Spaß und nächstes Mal früher mit den Hausaufgaben anfangen!

 

[Schnipp]

Ok, mein Thread war dann wohl nicht wirklich vollständig, sorry dafür

Vorgabe ist, dass im HTML nichts geändert wird, nur die js-Datei darf verändert werden.

Und in der js-Datei gibt es folgende Vorgabe:

/*
	changeColor changes the color of the colored 
	boxes depending on the selection of the respective select box.
*/
function changeColor(){
	// Variable idName stores the ID of the elements that invoked this function
	
	var idName = this.id;
	// Use if else statement to distinguish which select box has been used.
	// For each case: select the html element that correspond to the used select box.
	// For this element set a new attribute class with the name that corresponds to the selected value.
	// Have a look to the css to know which class will help you.

	// Console log if needed.
	console.log("value: " + this.value + ", id: " + this.id);
}

 

[John Reese]

Dann musst du vor der reinen Funktion eben noch den Event-Handler attachen:
http://www.mediaevent.de/javascript/event_listener.html

var elem = document.getElementById('links');
elem.addEventListener ('change', changeColor, false);

und dann natürlich auch für #mitte und #rechts, oder aber:

select_elements = document.getElementsByTagName('select');
for(var i=0; i < select_elements.length; i++) {
    select_elements[i].addEventListener('change', changeColor, false);
}

(beides ungetestet, sollte aber gehen)