如何使用同一个onclick函数实现不同HTML元素的点击状态切换？

• 逻辑判断错误：buttonEvent 中直接判断 .blue-wheel 元素是否存在，只要页面加载完成后蓝色轮子容器一直存在，该条件永远为真，所以无论点击哪个轮子，都会优先执行蓝色轮子变色的逻辑，永远不会走到后续分支。
• 点击事件未传递标识参数：onclick='buttonEvent()' 调用时没有传入当前点击轮子的标识，函数无法识别用户触发的是哪个轮子的点击事件。
• 代码存在语法错误：红色轮子亮图赋值语句缺少开头的双引号，运行时会抛出语法异常。

修改逻辑让点击事件传递当前轮子的颜色标识，函数直接根据标识处理对应轮子的变色逻辑，同时补全绿色、黄色轮子的点击事件绑定：

function setWheels() {
  // 所有轮子的onclick都传入对应的颜色参数
  document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' onclick='buttonEvent(\"blue\")'>";
  document.querySelector(".red-wheel").innerHTML = "<img src='red-dark.svg.svg' onclick='buttonEvent(\"red\")'>";
  document.querySelector(".green-wheel").innerHTML = "<img src='green-dark.svg.svg' onclick='buttonEvent(\"green\")'>";
  document.querySelector(".yellow-wheel").innerHTML = "<img src='yellow-dark.svg.svg' onclick='buttonEvent(\"yellow\")'>";
}

function buttonEvent(color) {
  const targetWheel = document.querySelector(`.${color}-wheel`);
  if (!targetWheel) return;
  // 切换为对应颜色的亮色调版本
  targetWheel.innerHTML = `<img src='${color}-light.svg.svg'>`;
  // 800ms后重置所有轮子为暗色调
  setTimeout(setWheels, 800);
}

不需要每次修改整个容器的innerHTML，直接修改图片的src属性即可，性能更高：

// 初始化时给img添加data-color属性标识颜色
function setWheels() {
  document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' data-color='blue' onclick='buttonEvent(this)'>";
  document.querySelector(".red-wheel").innerHTML = "<img src='red-dark.svg.svg' data-color='red' onclick='buttonEvent(this)'>";
  document.querySelector(".green-wheel").innerHTML = "<img src='green-dark.svg.svg' data-color='green' onclick='buttonEvent(this)'>";
  document.querySelector(".yellow-wheel").innerHTML = "<img src='yellow-dark.svg.svg' data-color='yellow' onclick='buttonEvent(this)'>";
}

function buttonEvent(imgEl) {
  const color = imgEl.dataset.color;
  imgEl.src = `${color}-light.svg.svg`;
  setTimeout(() => {
    imgEl.src = `${color}-dark.svg.svg`;
  }, 800);
}

该优化方案不需要重置所有轮子的DOM，仅修改当前点击图片的地址，效率更高，也不会影响其他未点击的轮子状态。

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