深色主题切换按钮代码失效求助：无报错但功能异常

问题排查与修复点： #

1. JavaScript语法错误

原代码中addEventListener调用格式错误，逗号位置错误导致事件回调未正确绑定：

// 错误代码
document.getElementById('themeButton').addEventListener('click'),
  function() { /* Theme button script */
    document.body.classList.toggle('dark-theme');
  }

修正后：将回调函数作为addEventListener的第二个参数传入，移除多余逗号：

document.getElementById('themeButton').addEventListener('click', function() {
    document.body.classList.toggle('dark-theme');
});

2. CSS嵌套语法与选择器错误

普通CSS不支持嵌套写法（如在body内嵌套h1/h2/p），且.dark-theme选择器被错误嵌套在body内部，导致样式优先级错误，同时部分属性末尾缺失分号：

// 错误代码
body {
  background-color: rgb(246, 246, 246);
  color: black;
  h1 {
    color: rgb(63, 66, 145);
    /* Header 1 features */
    font-size: 50px;
    padding-bottom: 8px;
    margin: 10px;
  }
  /* ...其他嵌套选择器... */
  .dark-theme {
    background-color: #A9a9a9;
    /* Dark gray background */
    color: #F5F5F5/* Light gray body text */
  }
  .dark-theme h1 {
    color: rgb(170, 172, 244)/* Light blue text for header 1 */
  }
}

修正后：移除嵌套结构，将子选择器独立写出，把.dark-theme改为body.dark-theme（确保作用于添加类的body元素），补充缺失分号：

body {
  background-color: rgb(246, 246, 246);
  color: black;
}

h1 {
  color: rgb(63, 66, 145);
  font-size: 50px;
  padding-bottom: 8px;
  margin: 10px;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 10px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  padding-bottom: 10px;
  margin: 10px;
}

/* Dark theme styles */
body.dark-theme {
  background-color: #A9a9a9;
  color: #F5F5F5; /* Light gray body text */
}

body.dark-theme h1 {
  color: rgb(170, 172, 244); /* Light blue text for header 1 */
}

3. 可选优化：确保DOM加载完成后执行JS

如果JS代码放在<head>标签中，需要包裹在DOMContentLoaded事件里，避免页面未加载完成时找不到元素：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('themeButton').addEventListener('click', function() {
    document.body.classList.toggle('dark-theme');
  });
});

完整可运行代码 #

HTML

<h1>Basic Website</h1>
<!-- Site text content -->
<hr>
<h2>Welcome to my basic webpage.</h2>
<p>This isn't my first time coding, but it's been so long that it might as well be.</p>

<img src="treehouse.jpg" alt="An elaborate treehouse.">
<!-- Image -->
<hr>

<button id="themeButton">Change Theme Color</button>
<!-- Theme button -->
<script>
document.getElementById('themeButton').addEventListener('click', function() {
    document.body.classList.toggle('dark-theme');
});
</script>

CSS

body {
  background-color: rgb(246, 246, 246);
  color: black;
}

h1 {
  color: rgb(63, 66, 145);
  font-size: 50px;
  padding-bottom: 8px;
  margin: 10px;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 10px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  padding-bottom: 10px;
  margin: 10px;
}

body.dark-theme {
  background-color: #A9a9a9;
  color: #F5F5F5;
}

body.dark-theme h1 {
  color: rgb(170, 172, 244);
}

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