Darkmode cookie is not removed on other pages when you press a certain key-CodePudding

to get straight to the point. The darkmode button is located on the start page ( index.html), I can turn it on and off with a click, as well as with the "D" key and it works so far. The problem however is that if I want to turn off the darkmode on another page with the "D" key, then the cookie is not deleted, because it apparently does not find the darkmode button on the page.

And please forgive my bad english and I hope I was able to make it more or less understandable.

The error messages:

enter image description here

HTML-Code:

<a onclick="toggleDarkMode()" id="darkButton" >Darkmode: Off</a>

CSS-Code:

.darkmode {
  --primary-color: -;
  --secondary-color: -;
  --font-color: -;
  --bg-color: -;
}

.darkButton {
  font-size: 18px;
  background-color: rgb(0, 0, 0);
  color: white;
  padding: 10px 35px 10px 35px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
  text-transform: uppercase;
}

.lightButton {
  background-color: rgb(255, 255, 255);
  color: black;
}

JS-Code:

//* js-cookie v3.0.1 | MIT *//

!function(a,b){var d,c;"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):(d=(a=a||self).Cookies,c=a.Cookies=b(),c.noConflict=function(){return a.Cookies=d,c})}(this,function(){"use strict";function b(b){for(var a=1;a<arguments.length;a  ){var c=arguments[a];for(var d in c)b[d]=c[d]}return b}function a(c,d){function e(e,h,a){if("undefined"!=typeof document){"number"==typeof(a=b({},d,a)).expires&&(a.expires=new Date(Date.now() 864e5*a.expires)),a.expires&&(a.expires=a.expires.toUTCString()),e=encodeURIComponent(e).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var g="";for(var f in a)a[f]&&(g ="; " f,!0!==a[f]&&(g ="=" a[f].split(";")[0]));return document.cookie=e "=" c.write(h,e) g}}return Object.create({set:e,get:function(a){if("undefined"!=typeof document&&(!arguments.length||a)){for(var f=document.cookie?document.cookie.split("; "):[],b={},d=0;d<f.length;d  ){var g=f[d].split("="),h=g.slice(1).join("=");try{var e=decodeURIComponent(g[0]);if(b[e]=c.read(h,e),a===e)break}catch(i){}}return a?b[a]:b}},remove:function(a,c){e(a,"",b({},c,{expires:-1}))},withAttributes:function(c){return a(this.converter,b({},this.attributes,c))},withConverter:function(c){return a(b({},this.converter,c),this.attributes)}},{attributes:{value:Object.freeze(d)},converter:{value:Object.freeze(c)}})}return a({read:function(a){return'"'===a[0]&&(a=a.slice(1,-1)),a.replace(/(%[\dA-F]{2}) /gi,decodeURIComponent)},write:function(a){return encodeURIComponent(a).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"})})

//* js-cookie v3.0.1 | MIT *//


//* DARKMODE *//

let DarkMode = false;

function toggleDarkMode() {
  var button = document.getElementById("darkButton");
  var element = document.body;

  element.classList.toggle("darkmode");
  DarkMode = !DarkMode;

  button.classList.toggle("lightButton");
  console.log("DarkMode: "   DarkMode);
  if (DarkMode) {
    Cookies.set("DarkMode", "On");
    document.getElementById("darkButton").innerHTML = "DarkMode: On";
  } else {
    Cookies.remove("DarkMode");
    document.getElementById("darkButton").innerHTML = "DarkMode: Off";
  }
}

let keyPress = 68
window.addEventListener("keydown", checkKeyPress);

function checkKeyPress(key) {
  if (key.keyCode === keyPress) {
    Cookies.set("DarkMode", "On");
    toggleDarkMode()
  }
}

var DarkCookie = Cookies.get("DarkMode")
if (DarkCookie == 'On') {
  CookieDarkMode = true;
  Darkmode = true;
  toggleDarkMode();
}

//* DARKMODE *//

CodePudding user response：

If you don't have the darkButton ID in some pages, you can check if your variable button is not null.

if (button) do.something;

and instead of repeat document.getElementById("darkButton") you can use your variable button, check inside the if (DarkMode).

let DarkMode = false;

function toggleDarkMode() {
  var button = document.getElementById("darkButton");
  var element = document.body;

  element.classList.toggle("darkmode");
  DarkMode = !DarkMode;

  if (button) button.classList.toggle("lightButton");
  console.log("DarkMode: "   DarkMode);
  if (DarkMode) {
    //Cookies.set("DarkMode", "On");
    if (button) button.innerHTML = "DarkMode: On";
  } else {
    //Cookies.remove("DarkMode");
    if (button) button.innerHTML = "DarkMode: Off";
  }
}
toggleDarkMode();

CodePudding user response：

Considering this code is executed on all pages, one way to workaround this is to split cookies business & button business into separate functions.

E.g.:

let DarkMode = false;
// ...

function toggleDarkModeCookies() {
  if (DarkMode) {
    Cookies.set("DarkMode", "On");
  } else {
    Cookies.remove("DarkMode");
  }
}

function toggleDarkModeButton() {
  var button = document.getElementById("darkButton");

  // Do nothing if there's no button
  if (!button) {
     return;
  }

  // The rest of handling logic
  // ...
}

Then you can use toggleDarkModeCookies & have an event listener firing it even if there's no toggle button on the page