Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Teilzeit_Rambo · 27. Oktober 2021

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.

HTML

div class="card">
                    <div class="card-header">
                        <h3>
                            Sicherheit
                        </h3>
                    
                    </div>
                    <div class="card-content">
                        <div class="kasten">
                            <div class="feld1">1</div>
                            <div class="feld2">2</div>
                            <div class="feld3">3</div>
                            <div class="feld4">4</div>
                          </div>

                    </div>
                </div>

Alles anzeigen

CSS

.card-header {
    padding: 15px 30px;
    border-bottom: 1px solid var(--second-bg-color);
    position: relative;

.kasten {
            display: grid; 
            grid-auto-flow: column dense; 
            grid-auto-columns: 1fr 1fr 1fr 1fr; 
            grid-auto-rows: 1fr 1fr 1fr 1fr; 
            grid-template-columns: repeat(2, 1fr); 
            grid-template-rows: repeat(2, 1fr); 
            gap: 4px 4px; 
            grid-template-areas: 
              "feld1 feld2"
              "feld3 feld4"; 
            align-content: center; 
            width:100px; 
            height: 100px; 
            text-align: center;
          }
          .feld1 { grid-area: feld1; background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
          .feld2 { grid-area: feld2;background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
          .feld3 { grid-area: feld3;background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
          .feld4 { grid-area: feld4;background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }

Alles anzeigen

Könnt ihr mir bei diesem Problem helfen?

Liebe Grüße

m.scatello · 27. Oktober 2021

Was hast du denn bisher versucht? Ich sehe noch nicht mal einen Ansatz von dir, um dieses Problem zu lösen.

Teilzeit_Rambo · 27. Oktober 2021

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

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

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

Code

const name = document.querySelector(".feld1");
function changeColor() {
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?

Sempervivum · 27. Oktober 2021

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.

Code

                <div class="card" onclick="changeColor(this)">
                    <div class="card-header">
                        <h3>
                            Sicherheit
                        </h3>
                    
                    </div>
                    <div class="card-content">
                        <div class="kasten">
                            <div class="feld1">1</div>
                            <div class="feld2">2</div>
                            <div class="feld3">3</div>
                            <div class="feld4">4</div>
                          </div>
                    </div>
                </div>

Alles anzeigen

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

Code

function changeColor(tile) {
    // tile ist die geklickte Kachel
}

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

Teilzeit_Rambo · 28. Oktober 2021

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

Teilzeit_Rambo · 28. Oktober 2021

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

HTML: HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css">
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
    
    <div class="kasten">
        <div class="feld1" onclick="changeColor(this)">1</div>
        <div class="feld2">2</div>
        <div class="feld3">3</div>
        <div class="feld4">4</div>
      </div>
    
  <script src="index.js"></script>
  </body>
</html>

Alles anzeigen

Code: Javascript

function changeColor(tile)
{
    tile.style.background = "blue";
}

Code: CSS

.kasten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr;
  gap: 4px 4px;
  grid-auto-flow: column dense;
  align-content: center;
  grid-template-areas:
    "feld1 feld2"
    "feld3 feld4";
  width: 100%;
  height: 50%;
}

.feld1 { grid-area: feld1;
background: red; }

.feld2 { grid-area: feld2;
  background: red;

}

.feld3 { grid-area: feld3; 
  background: red;
}

.feld4 { grid-area: feld4;
  background: red;
}

Alles anzeigen

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

Sempervivum · 28. Oktober 2021

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

     <div class="kasten">
        <div class="feld1" onclick="changeColor(this)">1</div>
        <div class="feld2" onclick="changeColor(this)">2</div>
        <div class="feld3" onclick="changeColor(this)">3</div>
        <div class="feld4" onclick="changeColor(this)">4</div>
      </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.

Teilzeit_Rambo · 28. Oktober 2021

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

Code

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

Code

var color = ['green', 'orange', 'purple', 'grey','red',];

var zaehlen = 0;
function changeColor(tile)
{
    tile.style.background =  color[zaehlen];
    zaehlen++;
    if (zaehlen>4)
    zaehlen =0;
}

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.

Sempervivum · 28. Oktober 2021

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?

Teilzeit_Rambo · 28. Oktober 2021

Zitat von Sempervivum

Super, dass es so funktioniert.

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

Zitat von Sempervivum

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.

Sempervivum · 28. Oktober 2021

OK, dann ist ja alles in Ordnung.

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Jetzt mitmachen!

Teilen

Tags