Hintergrund mit button ändern?
Beim folgenden Code ändert sich die Farbe von Hintergrund, Schrift.außerdem die Beschriftung vom Button auf die Farbe die als nächstes kommt.
Ich würde aber gerne noch eine dritte Farbe hinzufügen aber auch nach lagen googlen leider nicht fündig geworden des halb Versuche ich es nochmal hier.
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>html Editor</title>
</head>
<body>
<div class='logo'>
<b>
<span class='brackets left'><</span>
<span>html</span>
<span class='brackets right'>></span>
</b>
Editor
</div>
<p class='sample'>This is the simple example of how HTML Editor works. You can change the code if you want.</p>
<button id='button' onClick='changeTheme()'>Dark Theme</button>
<script>
function changeTheme(){
if(document.getElementById('button').innerHTML==='Dark Theme'){
document.body.style.background='#555';
document.body.style.color='white';
document.getElementById('button').innerHTML='Light Theme';
}
else{
document.body.style.background='white';
document.body.style.color='#555';
document.getElementById('button').innerHTML='Dark Theme';
}
}
</script>
</body>
</html>
1 Antwort
Ich sehe hier zwar keinen Code, aber ich würde nach dem Drücken des Buttons eine globale Variable um 1 erhöhen und dann Modulo 3 rechnen und danach ein switch-case machen für 0, 1 und 2, in welchem dann die jeweiligen Farben gesetzt werden.
Keine Ahnung, ob dich das weiter bringt geschweige denn, ob ich die Frage richtig verstanden habe.
Würde den Code also so verändern:
<script>
var colorState = 1;
function changeTheme(){
colorState++;
colorState %= 3;
switch(colorState){
case 0:
document.body.style.background='#555';
document.body.style.color='white';
document.getElementById('button').innerHTML='Light Theme';
break;
case 1:
document.body.style.background='white';
document.body.style.color='#555';
document.getElementById('button').innerHTML='Dark Theme';
break;
case 2:
// YOUR COLOR HERE
break;
}
}
</script>
Habe aktualisiert; in case 2 muss halt dann deine persönliches Theme rein
(colorState habe ich standardmäßig auf 1, weil das ja das Ursprungstheme ist)
Naja, ich habe eine Variable "colorState" erstellt, welche repräsentativ dafür ist, welches Theme gerade ausgewählt ist.
"colorState++" ist das selbe wie "colorState = colorState + 1", also dass die Variable plus 1 gerechnet wird. Auf Deutsch heißt das also, dass es ein Theme weiter gegangen ist.
"colorState = colorState % 3" bedeutet, dass durch 3 geteilt wird, aber der Rest wieder gespeichert wird; Modulo heißt diese Operation. Das bedeutet, wenn colorState auf 3 gesetzt wird, bleibt bei der Division kein (also 0) Rest übrig. Somit limitiert man die Werte in colorState immer auf maximal 2
In dem Switch (also dasselbe wie mehrere If-Elses) schaust du danach also nur nach, welches Theme jetzt ausgewählt wurde (also welcher Wert in der Variable "colorState" ist) und veränderst die Farben somit.
Bei Fragen gerne fragen!
Sorry habe den Code vergessen