点击按钮切换图片时同步修改页面背景色问题求助

我看了你的代码，问题出在这几个地方：

• 你写了colorize函数，但点击按钮时根本没调用它，背景色的逻辑完全没触发
• colorize函数修改的是按钮本身的背景色，而不是整个页面的背景色
• 关灯按钮也没有对应的背景色还原逻辑

下面是修正后的完整代码，我会拆解每一处修改：

修改后的JavaScript #

// 开灯逻辑：切换亮灯图片 + 改变页面背景色
function turnOnLight() {
  document.getElementById('myImage').src = '/img/393533_02.PNG';
  // 修改html的背景色（你原CSS是给html设置的背景）
  document.querySelector('html').style.backgroundColor = 'blue';
  // 保留按钮文字变色的需求
  const btn = document.getElementById("azul");
  btn.style.color = "yellow";
}

// 关灯逻辑：切换熄灯图片 + 还原页面背景色
function turnOffLight() {
  document.getElementById('myImage').src = '/img/393533_01.PNG';
  // 还原成初始的灰色背景
  document.querySelector('html').style.backgroundColor = 'grey';
}

修改后的HTML #

<div id="branca">
  <h1>LOI Lampen aanzetten en uitzetten</h1>
  <!-- 点击开灯按钮时调用封装好的逻辑函数 -->
  <button id="azul" onclick="turnOnLight()">Turn on the light</button>
  <img id="myImage" src="img/393533_01.PNG" class="mudar">
  <div id="yellow">
    <!-- 关灯按钮调用对应还原逻辑 -->
    <button onclick="turnOffLight()">Turn off the light</button>
  </div>
</div>

修改后的CSS（优化体验） #

html {
  background: grey;
  transition: background 0.3s; /* 加个过渡动画，背景色变化更平滑 */
}

#azul:focus {
  background: blue;
}

关键修改点说明： #

1. 拆分逻辑并封装函数：把开灯、关灯的操作分别封装成独立函数，代码更清晰，也方便统一处理图片和背景色
2. 主动调用函数：按钮的onclick属性要明确调用对应的逻辑函数，而不是只写图片切换的代码
3. 修改页面背景色：用document.querySelector('html').style.backgroundColor来修改整个页面的背景（和你原CSS的设置对象保持一致），而不是修改按钮自身的样式
4. 补充还原逻辑：关灯时要把页面背景改回初始的灰色，保证状态对应

这样修改后，点击开灯按钮就会同时切换亮灯图片和蓝色页面背景，点击关灯按钮则切换回熄灯图片和灰色背景啦～

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