Card soll Farbe bei onclick wechseln - in fester Reihenfolge

  • Hallo zusammen,

    ich habe folgendes Problem und finde leider nicht so wirklich den richtigen Weg, da Javascript für mich eine große Unbekannte ist.

    Ich habe vier Cards / Kacheln, wie man es auch nennen mag definiert und per css gestyled.
    Ich möchte, dass pro onclick auf die Kachel die background Farbe sich in einer bestimmten Reihenfolge ändert. Sprich Start Kacheln in weiß -> click Kacheln wird grün --> click Kachel wird orange > click Kacheln wird rot--> click Kachel wird grau > click Kacheln wird in Startfarbe gesetzt.


    Könnt ihr mir bei diesem Problem helfen?

    Liebe Grüße

  • Hallo m.scatello,

    vielen Dank für deine schnelle Antwort und entschuldige, wenn ich dir zu wenig Eigenleistung offenbart habe.


    Zu erst habe ich die vier Felder als Button versehen

    Code
    1. <button onclick="changeColor()" class="feld1">1</button>
    2. <button onclick="changeColor()" class="feld2">2</button>
    3. <button onclick="changeColor()" class="feld3">3</button>
    4. <button onclick="changeColor()" class="feld4">4</button>


    Dann habe ich ein Script erstellt, welches in der css die background-farbe des feldes ändert:

    Code
    1. const name = document.querySelector(".feld1");
    2. function changeColor() {
    3. name.style.background = "green";

    Habe aktuell die Schwierigkeit, dass ich das nur für ein Feld machen kann. Habe den selben Quellcode verwendet, jedoch beim querySelector feld 2 gewählt, da passiert garnichts mehr.
    Des Weiteren habe ich leider keinen Ansatz, wie ich die Farben nach jeweiligem Klick ändere. Nutze ich da eine For-Schleife?

  • Du schriebst am Anfang:

    Zitat

    dass pro onclick auf die Kachel die background Farbe sich in einer bestimmten Reihenfolge ändert.

    Wenn das so ist, brauchst Du keinen Button sondern kannst den Eventlistener direkt für die Kachel registrieren.


    Zitat

    Habe aktuell die Schwierigkeit, dass ich das nur für ein Feld machen kann.

    Diese Schwierigkeit kannst Du lösen, indem Du der Funktion das geklickte Element übergibst.

    Es steht dann als Parameter in der Funktion zur Verfügung:

    Code
    1. function changeColor(tile) {
    2. // tile ist die geklickte Kachel
    3. }

    Weitere Hinweise: Lege die Farben in einem Array ab, siehe hier:

    https://developer.mozilla.org/…ence/Global_Objects/Array


    Damit Du die Farben in der richtigen Reihenfolge umschalten kannst, musst Du die aktuelle Farbe bzw. den Index in dem Array speichern. Ich empfehle, das in einem data-Attribut zu tun, dann hast Du es gleich der jeweiligen Kachel zugeordnet:

    https://developer.mozilla.org/…Howto/Use_data_attributes

  • Hallo Sempervivum,

    da diese Thematik für mich neu ist brauche ich sicherlich erst was Zeit, um das gelesene zu verstehen und umzusetzen. Finde den Vorschlag mit dem Array sehr gut, das leuchtet ein und macht sehr viel Sinn.
    Wie das mit dem Eventlistener funktioniert muss ich mir dann mal durchlesen.
    Mit dem übergeben des geklcikten Feldes hat spontan nicht wirklich geklappt. Ich gebe dem ganzen jetzt gleich einen neuen Versuch.

    Vielen Dank für deine Mühe :)

    VG

    Teilzeit_Rambo

  • Also ich habe mal nachgelesen und geschaut, ob ich es geändert bekomme. Leider ist das nicht der Fall und so langsam verzweifel ich ...

    Hier sind meine drei Codeblöcke

    Code: Javascript
    1. function changeColor(tile)
    2. {
    3. tile.style.background = "blue";
    4. }

    Leider funktioniert der Eventlistener nicht ... oder eher gesagt, irgendwo mache ich noch einen fatalen Fehler

  • Bei mir funktioniert das, was Du bisher programmiert hast, schon: Bei Klick auf die erste Kachel ändert sich die Hintergrundfarbe auf blau.

    Was jetzt noch fehlt: Wenn Du den Eventlistener auf diese Weise inline notierst, musst Du das bei allen Elementen tun, so wie in deinem ersten Posting mit den Buttons:

    Code
    1. <div class="kasten">
    2. <div class="feld1" onclick="changeColor(this)">1</div>
    3. <div class="feld2" onclick="changeColor(this)">2</div>
    4. <div class="feld3" onclick="changeColor(this)">3</div>
    5. <div class="feld4" onclick="changeColor(this)">4</div>
    6. </div>

    (Man kann das auch anders mit addEventListener und Eventbubbling machen, aber wir wollen es für den Anfang nicht zu kompliziert machen :) )

    Der nächste Schritt wäre dann, ein Array mit den Farben anzulegen, versuche es.

  • Danke, dass du mich so motivierst. Array ist angelegt, die Farben werden aus dem array genommen. Die Reihenfolge klappt auch.

    Code
    1. <div class="kasten">
    2. <div class="feld1" onclick="changeColor(this)">1</div>
    3. <div class="feld2" onclick="changeColor(this)">2</div>
    4. <div class="feld3" onclick="changeColor(this)">3</div>
    5. <div class="feld4" onclick="changeColor(this)">4</div>
    6. </div>
    Code
    1. var color = ['green', 'orange', 'purple', 'grey','red',];
    2. var zaehlen = 0;
    3. function changeColor(tile)
    4. {
    5. tile.style.background = color[zaehlen];
    6. zaehlen++;
    7. if (zaehlen>4)
    8. zaehlen =0;
    9. }

    Jetzt muss ich mir erstmal Gedanken machen, wie ich diese Werte weiter verarbeite. Ziel soll es sein, dass jede Kachel für einen Tag steht ( 4 Kacheln dienen erstmal nur der Orientierung). Die angeklickte Farbe soll zukünftig verknüpft mit dem aktuellen Tag in einer Datenbanktabelle abgespeichert werden. Hierdurch sollen zwei Sachen gewährleistet werden, eine Auswertung von einzelnen Tagen und die Speicherung der Daten.

  • Super, dass es so funktioniert. Aber bist Du sicher, dass es das ist, was Du vor hattest? Ich hatte es so verstanden, dass sich die Farbe der Kacheln unabhängig einstellt, d. h. 2. Kachel ist grün und wechselt beim Klick auf orange, 3. Kachel ist purple und wechselt beim Klick auf grey?

  • Super, dass es so funktioniert.

    Kaum versuche ich es im bestehenden Programm zu implementieren, funktioniert es nicht :D :/

    Ich hatte es so verstanden, dass sich die Farbe der Kacheln unabhängig einstellt, d. h. 2. Kachel ist grün und wechselt beim Klick auf orange, 3. Kachel ist purple und wechselt beim Klick auf grey?

    Ich glaube, ich habe mich falsch ausgedruckt, das tut mir Leid falls ich dadurch für Verwirrung gesorgt habe.

    Jede Kachel soll zu Beginn weiß sein. Der dazugehörige Wert aus der DB ist 0.
    Tag1: Keine Vorkommnisse = grün. Ich klicke die Kachel auf grün. Der Wert wird in der DB abgespeichert. Die anderen Kacheln bleiben unberührt.
    Tag2: Kachel 1 ist grün, da der Wert in der DB dem für grün entspricht. Da es heute Probleme gab = orange klicke ich die zweite Kachel so lange, bis diese orange ist. Der Wert wird in der DB abgespeichert.

    So soll das weitergehen.