暗模式JS脚本仅index页生效无报错 其他页面功能失效问题咨询

问题根因 #

你写的暗模式脚本里，在全局作用域预先获取了content、time两个DOM节点，但你当前贴的这个不生效的页面里，没有对应id="content"和id="time"的元素，导致这两个变量的值为null。
调用darkMode函数时，执行到time.style.color = "white"、content.style.color="greenyellow"这两行代码时，会尝试对null的style属性赋值，直接抛出类型错误，打断函数执行，所以暗模式没有生效，你没看到报错是因为没有打开浏览器的开发者控制台。

其他可复现的代码bug #

• 获取label标签的参数写错：getElementsByTagName("labels")的参数应该是单数label，所以你永远无法获取到页面里的<label>元素，暗模式下label文字颜色不会生效
• 按钮类赋值逻辑重复：你写了两个连续的循环给按钮设置class，后面的赋值会直接覆盖前面的，第一个给按钮加darks类的循环完全无效
• 全局预获取DOM的方式容错性极差，只要页面缺一个提前获取的元素，整个函数就会崩溃

修复方案 #

调整JS代码，对可能不存在的元素加存在性判断，修正参数错误，删掉冗余逻辑，参考修改后的代码：

let dark = false;
function darkMode() {
  // 函数内部获取DOM，避免全局预获取的容错问题
  const labels=document.getElementsByTagName("label")
  const answers=document.getElementById("demo");
  const content=document.getElementById("content");
  const body = document.getElementById("body");
  const heading1 = document.getElementsByTagName("h1")[0];
  const heading3 = document.getElementsByTagName("h3")[0];
  const buttons = document.getElementsByTagName("button")
  const titles = [heading1, heading3, answers].filter(Boolean) // 过滤不存在的元素
  const time=document.getElementById("time");
  const button = document.getElementById("dark-btn");

  if (!dark) {
    // 如需同时加多个类可以用classList.add，这里保留你原有的单类逻辑
    for (let i = 0; i < buttons.length; i++){
      buttons[i].className = "dark-btn";
    }
    for (let i = 0; i < labels.length; i++){
      labels[i].className = "dark-txt";
    }
    titles.forEach(item => item.className = "dark-txt")
    
    body.className = "dark";
    if (button) {
      button.style.backgroundColor = "white";
      button.style.color = "rgb(88, 119, 255)";
    }
    if (time) time.style.color = "white"
    if (content) content.style.color="greenyellow"
    dark = true;
  } else {
    for (let i = 0; i < buttons.length; i++){
      buttons[i].className = "";
    }
    for (let i = 0; i < labels.length; i++){
     labels[i].className = "";
    }
    titles.forEach(item => item.className = "")
    
    body.className = "";
    dark = false;
    if (button) {
      button.style.backgroundColor = "rgb(88, 119, 255)";
      button.style.color = "white";
    }
    if (content) content.style.color="green"
  }
      
}

如果你的不同页面有独有的元素，也可以按照上面的逻辑，给对应操作加if (元素存在)的判断即可。

内容的提问来源于stack exchange，提问作者Joshua