使用JavaScript实现HTML灯图片开关切换功能故障排查求助

云上老周

2026-4-28

解决灯开关切换功能的代码问题

Hey there! Let's figure out why your lamp toggle isn't working and fix it up. I spotted a few key issues in your code:

问题分析

document.getElementsByName("offf") 返回的是元素集合（不是单个元素），所以你直接访问 x.id 会得到 undefined，根本没法判断是哪个按钮被点击。
你错误地修改了按钮的 src 属性，但实际上需要改变的是灯图片（id为lamp）的src呀！按钮又不是图片，改它们的src完全没用~
图片路径后面多了斜杠（比如js/Capture.PNG/），这会让浏览器找不到正确的图片资源。
两个按钮调用同一个函数，但你没区分是哪个按钮触发的操作，函数不知道该执行开还是关的逻辑。

修正后的代码方案

这里给你两种可行的写法，选你觉得顺手的就行：

方案一：通过参数传递操作指令

<img id="lamp" src="js/Capture.PNG" alt="Lamp" />
<button id="off" onclick="toggleLamp('off')">Turn off the light</button>
<button id="on" onclick="toggleLamp('on')">Turn on the light</button>

function toggleLamp(action) {
  // 获取灯图片元素
  const lampElement = document.getElementById('lamp');
  if (action === 'off') {
    // 切换到关灯状态的图片
    lampElement.src = 'js/Capture.PNG';
  } else {
    // 切换到开灯状态的图片
    lampElement.src = 'js/Capture2.PNG';
  }
}

方案二：通过`this`获取点击的按钮

这种写法不用传参数，直接拿到点击的按钮元素来判断：

<img id="lamp" src="js/Capture.PNG" alt="Lamp" />
<button id="off" onclick="toggleLamp(this)">Turn off the light</button>
<button id="on" onclick="toggleLamp(this)">Turn on the light</button>

function toggleLamp(clickedButton) {
  const lampElement = document.getElementById('lamp');
  // 根据按钮的id判断要执行的操作
  if (clickedButton.id === 'off') {
    lampElement.src = 'js/Capture.PNG';
  } else {
    lampElement.src = 'js/Capture2.PNG';
  }
}