Javascript Tausch von Bildern

[KyunKyun]

Hi,

Bin ein blutiger Anfänger in JavaScript.
Für eine Aufgabe soll ich ein kleines "Spiel" erstellen.
Es geht darum, dass es vier Karten gibt, die verdeckt sind.
Man soll eine bestimmte Karte finden.
Beim draufklicken auf die jeweilige Rückseite, soll sich diese Karte umdrehen.
Ich bin soweit gekommen, als das bei einem Klick auf die Rückseite einer Karte sich das Bild ändert, allerdings ändern sich alle 4 Bilder auf einmal (bzw werden aufgedeckt), obwohl das ja nur beim jeweiligen Klicken passieren soll.
Wie krieg ich das jetzt hin, dass sich das nach einander öffnet?

Das bisherige Script:

window.onload=init;

function init(){

var anzahlBilder=document.getElementsByTagName('img');

for (var i=1; i<anzahlBilder.length; i++){
document.getElementsByTagName('img').onclick=changeSrc;
}
}

function changeSrc(){
document.getElementsByTagName('img')[1].src="../Images/kaese.jpg";
document.getElementsByTagName('img')[2].src="../Images/maus.png";
document.getElementsByTagName('img')[3].src="../Images/katze.jpg";
document.getElementsByTagName('img')[4].src="../Images/kaese.jpg";
}

 

[miniA4kuser]

Das liegt daran, das du in der Funktion changeSrc ja auch bei allen Bildern das src-Attribut änderst.

Über das Schlüsselwort this kannst du innerhalb der Funktion changeSrc erkennen, welches Bild geklickt wurde.

Bei den Bildern könntest du dann das data-Attribut verwenden, siehe hier.
Damit könntest du dann den Zustand des Bildes (verdeckt, offen) speichern und auch das Zielbild (kaese, maus , katze) auslesen bzw. reinschreiben.

 

[dbarthel]

Du arbeitest in der Schleife, ja auch alle Bilder ab, und nicht nur eines.

Warum arbeitest du nicht mit onclick und der jeweiligen ID, für jedes Bild einzeln?

<img src="rueckseite.jpg" id="bild1" onclick="changeSrc(this.ID)"></img>


Upps, "miniA4kuser" hat geantwortet, während ich noch tippte.

 

[miniA4kuser]

@dbarthel: Warum ein Beispiel mit inline-Eventregistrierung? Die onclick-Event wird doch schon mit einer for-Schleife korrekt registriert und in der Funktion kannst du dann doch auch mit this.id die ID abfragen.
Trotzem finde ich den Ansatz mit data-Attributen flxibler. Bei deinem Vorschlag musst du innerhalb der Funktion deklarieren, welches Bild (Quelle) zu welcher ID gehört. Finde ich nicht so flexibel.

 

[dbarthel]

@dbarthel: Warum ein Beispiel mit inline-Eventregistrierung? Die onclick-Event wird doch schon mit einer for-Schleife korrekt registriert und in der Funktion kannst du dann doch auch mit this.id die ID abfragen.

@miniA4kuser:

weil ich in dem Code von KyunKyun nicht gefunden habe, wo die Rückseite der jeweiligen Karte gespeichert ist, ich dachte die einzelnen Images

Images/kaese.jpg";

usw. sind die jeweiligen Vorderseiten.

 

[kkapsner]

wo die Rückseite der jeweiligen Karte gespeichert ist

Ich geh' mal davon aus, dass die Rückseite für alle Karten gleich aussieht...

 

[dbarthel]

Ich geh' mal davon aus, dass die Rückseite für alle Karten gleich aussieht...

Ja ober wo im Code steckt die?

 

[kkapsner]

Die könnte man im changeSrc() direkt bevor man .src setzt ja aus .src auslesen. Aber du hast Recht: sauberer wäre es, wenn die auch in einem data-Attribut gespeichert würde.

@KyunKyun: Du hast nicht mehr geantwortet. Ist dein Problem jetzt gelöst oder woran hängst du?