Can anybody help me out with my Darkmode?
Question
I want do have a basic Darkmode linked to a key press. I'am a Beginner in JavaScript and i cannot get it to work. I want it like, you press a key, the Darkmode turns on with a Cookie over js-cookie, and I press the same Key again to turn off the Darkmode and delete the cookie. Can anybody help me?
There is my Code:
var elem = document.getElementById("folie");
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key) {
let zahl = 1;
if (key.keyCode == "70") {
if (zahl == 1) {
zahl++
dark()
Cookies.set("Darkmode", "An");
}
if (zahl == 2) {
zahl--
Cookies.remove("Darkmode")
}
}
}
var DarkCookie = Cookies.get("Darkmode");
if (DarkCookie == 'An') {
dark();
}
function dark() {
var element = document.body;
element.classList.toggle("dark-mode");
}
Edit:
Ok i've got it:
let CookieDarkMode = false;
function toggleDarkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key) {
if (key.keyCode === 70) { //"F" has been pressed
CookieDarkMode = !CookieDarkMode;
console.log("Cookie Dark mode: " + CookieDarkMode);
toggleDarkMode();
if (CookieDarkMode) {
Cookies.set("Darkmode", "An");
}else {
Cookies.remove("Darkmode");
}
}
};
var DarkCookie = Cookies.get("Darkmode")
if (DarkCookie == 'An') {
CookieDarkMode = true;
toggleDarkMode();
}
2 answers
solution1
1 2020-02-05 14:30:25
You don't have to store a number. You can just get the previous cookie value with a boolean
let CookieDarkMode = false; function toggleDarkMode() { var element = document.body; element.classList.toggle("dark-mode"); } window.addEventListener("keydown", checkKeyPress); function checkKeyPress(key) { if (key.keyCode === 70) { //"F" has been pressed CookieDarkMode = !CookieDarkMode; console.log("Cookie Dark mode: " + CookieDarkMode); toggleDarkMode(); } };
body { background-color: ghostwhite; } .dark-mode { background-color: black; color: white; }
<body> <p>Lorem Ipsum</p> </body>
solution2
0 2020-02-05 14:27:17
your problem is on your checkKeyPress function, you always check for the zahl value, but it will always start as 1 .
for demostration purposes you are doing this basically:
function sum(){ let zahl = 1; zahl++ console.log(zahl) } // you will never see a 3, because you are creating `zhl` // in each call with a value of 1 sum(); sum(); sum(); sum();
therefore, each time you check for the zahl variable, it will be 1 and will always enter the if that turns on the darkmode .
the solution for your code would be to move the zahl variable outside the function scope:
let zahl = 1; // outside the function scope
var elem = document.getElementById("folie");
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key) {
if (key.keyCode == "70") {
if (zahl == 1) {
zahl++
dark()
Cookies.set("Darkmode", "An");
}else if (zahl == 2) {
zahl--
Cookies.remove("Darkmode")
dark(); //you should call dark here as well to toggle to the other mode.
}
}
}
var DarkCookie = Cookies.get("Darkmode");
if (DarkCookie == 'An') {
dark();
}
function dark() {
var element = document.body;
element.classList.toggle("dark-mode");
}
note: it doesn't look like the best implementation, it would be easier to read if you use a boolean for the state of the mode or if you want multiple types, you can use the name as a key for each of the modes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.