Button färben nach dem Click?

Hallo liebe Community,

Ich habe eine kleine Test Webseite und probiere mich gerade daran, dass Buttons nach einem Klick die Farbe vom Rand (also "Border") geändert wird. Das habe ich mithilfe von CSS mit dem :focus tag gemacht. Dies funktioniert auch gut, allerdings ist es so, dass wenn ich an irgendeine Stelle (meistens Stellen ohne Inhalt oder Button, also komplett frei) klicke, dass dann die Färbung aufgehoben wird. Das wollte ich allerdings nicht so. Ich wollte das so haben, dass das nur passiert wenn ich die anderen dazugehörigen Buttons klicke (Sonst soll nichts passieren).

Ich habe allerdings noch weitere Buttons. Bedeutet, dass nicht alles beeinflusst werden soll. Das kann man ja mit sicherheit mit ID´s oder Klassen lösen.

Kann mir jemand dabei helfen, mit der Färbung?

Answer 1

[Babelfish]

Viele Wege führen dahin. Einer wäre der hier:

Live: https://jsfiddle.net/j5m68x9o/

HTML

<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>

CSS

.button {
 padding: 4px 8px;
 border: 2px solid black;
 border-radius: 5px;
 background-color: white;
}

.button.active {
 border-color: red;
 background-color: yellow;
}

Javascript

document.querySelectorAll(".button").forEach((el) => {
  el.addEventListener("click", () => {
    el.classList.toggle("active");
  });
});

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[Lukas665]

Geht das denn auch, wenn man zum Beispiel Buttons mit gleiche name Tag hat, dass diese dann nach dem klick des anderen ihre vorherige Färbung wieder haben. Hoffe du verstehst was ich meine haha

[Babelfish]

@Lukas665

Ja, das geht natürlich auch:

https://jsfiddle.net/vmgz14cx/

document.querySelectorAll(".button").forEach((el) => {
  el.addEventListener("click", () => {
    resetButtons();
    activateButton(el);
  });
});

const activateButton = (el) => {
  el.classList.add("active");
};

const resetButtons = () => {
  document.querySelectorAll(".button").forEach((el) => {
    el.classList.remove("active");
  });
};

Und daraus solltest du es schaffen was eigenes zu machen. ;-)

[Lukas665]

@Babelfish

Sorry, wenn ich dich jetzt etwas nerve, aber ich meinte, dass z.B es mehrere Reihen von Buttons gibt. Also z.B drei nebeneinander. Innerhlab den Reihen, soll dann jeweils immer die Farbe geändert werden und der Button davor wieder in seinen Normalzustand zurückkehren. :)

[Babelfish]

@Lukas665

Dann änderst du das halt entsprechend ab und machst für jede Reihe eine extra Klasse, wie bspw. .button1 und .button2

[Lukas665]

@Babelfish

Ok ich probiere das mal aus. Danke für deine Hilfe! :)