In JS Button-Farbe toggeln?
Hallo,
ich möchte gerne die Hintergrundfarbe meines Button's durch einen Klick ändern.
Einmal drauf klicken soll ihn bspw. Gelb einfärben, nochmals soll ihn wieder zurückfärben.
Dazu soll dabei ein php-Skript ausgeführt werden. (Falls ihr wisst wie man das hier einfügt immer gerne sagen, soll aber erst mal um den Button gehen)
Ich bräuchte also auch eine Information, ob der Button nun gedrückt wurde oder nicht, damit ich das richtige Skript ausführen kann (Gibt jeweils eine Funktion, wenn der Button "An" ist bzw wenn er "Aus" ist)
2 Antworten
Die Farbe ändern und die Skripts aufrufen kannst du mit JS. Einfach eine Methode erstellen und diese über den Button ausführen lassen, dann eine Variable haben welche dir sagt ob der.Button die eine oder die andere Farbe hat. Die Variable änderst du immer wenn man drauf klickt, dann Holst du dir immer das Button Objekt über den QuerySelector und änderst über element.style.backgroundColor = "red" die Farbe. Und da kannst du auch die PHP Skripts aufrufen.
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button onclick="test()" style="background-color: red;" id="btn">Click me <3</button>
<script defer>
const btn = document.querySelector("#btn")
const test = () => {
if (btn.style["background-color"] === "red") {
btn.style.backgroundColor = "green";
$.ajax({
url: "webservice.php?a=red"
}).done(function(data) {
console.log(data);
});
} else {
btn.style.backgroundColor = "red";
$.ajax({
url: "webservice.php?a=green"
}).done(function(data) {
console.log(data);
});
}
}
</script>
</body>
</html>
So könntest du es z.B. machen:
<button onclick="this.style.backgroundColor=this.style.backgroundColor?'':'yellow'">Ein Knopf</button>
https://jsfiddle.net/1ektq6y2/
Erklärung:
Onclick wird ausgeführt, wenn man den Knopf anklickt.
this.style.backgroundColor
ist "yellow" (oder als Boolean: true), wenn der Button Gelb gefärbt ist. Ansonsten ist es "", also ein leerer String (als Boolean: false), wenn noch keine Hintergrundfarbe gesetzt wurde.
Man kann also "ist die Background-Color bereits gesetzt?" als Bedingung hernehmen, und dann beim Klick entsprechend die Background-Color entfernen, oder sie setzen. Mein Ternary Operator in Deutsch:
Wenn Hintergrundfarbe gesetzt, dann entferne Hintergrundfarbe, ansonsten setze Hintergrundfarbe.
Das war an sich auch meine Idee. Aber ich bekomme das nicht so wirklich hin.
Kannst du vllt bsphaft einen Code vorführen?