JS Button onclick Farbe ändern?

Ich möchte, das wenn ich ein Button drücke sich die Farbe von ihm ändert.

Wie mache ich das mit JS?

Answer 1

[regex9]

So:

<button onclick="this.style.backgroundColor='green'" type="button">Change color</button>

Oder so:

<button id="colorButton" type="button">Change color</button>
<script>
  document.getElementById("colorButton").addEventListener("click", function() {
    this.classList.add("green");
  });
</script>

CSS:

.green { background-color: green }

Die zweite Option halte ich für eleganter, da sie es erlaubt, HTML, Logik und Styling voneinander zu trennen.

Comments

[xxlolxx283]

Wenn dort 2 Buttons sind und einer schon durch klick die Farbe geändert hat und jetzt wird auf den anderen standart Button gedrückt, um die Farbe zu ändern.

Wie kann ich es hinbekommen, das dann der andere Button wieder normal wird? Also einer darf immer nur die Farbe verändert haben.

[regex9]

@xxlolxx283

Entferne die Klasse von dem Button, der nicht mehr aktiviert sein soll, wieder.

this.classList.remove("green");

[xxlolxx283]

@regex9

So?

<button id="colorButton" type="button">Change color</button>
<br>
<button id="colorButton1" type="button">Change color</button>
<script>
 document.getElementById("colorButton").addEventListener("click", function() {
   this.classList.add("green");
   this.classList.remove("green");
 });

 document.getElementById("colorButton1").addEventListener("click", function() {
   this.classList.add("green");
   this.classList.remove("green");
 });

</script>

<style>
.green { background-color: green }
</style>

[regex9]

@xxlolxx283

this bezieht sich auf das aktuelle Element. Das heißt, derzeit würdest du dem angeklickten Button erst die Klasse zuweisen und sie dann gleich wieder entfernen.

https://jsfiddle.net/q3wL714b/