按下某个键时，darkmode cookie不会在其他页面上删除

Question

直接达到这一点。 Darkmode按钮位于开始页面（index.html）上，我可以单击并使用“ D”键打开和关闭它，到目前为止它可以正常运行。但是，问题是，如果我想关闭带有“ D”键的另一页上的Darkmode，则不会删除Cookie，因为它显然在页面上找不到Darkmode按钮。

请原谅我的英语不好，我希望我能够或多或少地理解它。

错误消息：

在此处输入图像描述

代码：

<a onclick="toggleDarkMode()" id="darkButton" class="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 *//

Answer 1

如果您没有DarkButton id在某些页面中，则可以检查您的变量按钮不是null。

if (button) do.something;

而不是重复document.getElementById（“ darkbutton”）您可以使用变量button，请在内检查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();

Answer 2

考虑到此代码是在所有页面上执行的，一种解决方法是将Cookies Business分开＆amp;按钮业务为单独的功能。

例如：

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
  // ...
}

然后您可以使用toggledarkModeCookies＆amp;即使页面上没有切换按钮，也有一个事件侦听器发射它