JS实现钢琴网页主题切换功能失效，部分按键颜色未正常更新

问题根源 #

你的主题状态变量a的更新逻辑写在了遍历按键的for循环内部，导致每处理完1个按键就会修改a的取值，后续的按键会执行其他分支的替换逻辑，因此仅第一个按键的样式符合预期，其余按键替换失败。
同时你的主题按钮的类没有同步更新，也会导致按钮颜色无法跟随主题切换。

修复后代码 #

替换你的JS逻辑为以下内容即可正常运行：

const butt = document.getElementById('theme')
var a = 0;

function ChangeTheme(){
  const tone = document.querySelectorAll('.key');
  let oldTheme, newTheme;
  // 先确定本次切换的新旧主题
  if(a === 0){
    oldTheme = 'light';
    newTheme = 'dark';
  } else if(a === 1){
    oldTheme = 'dark';
    newTheme = 'crow';
  } else {
    oldTheme = 'crow';
    newTheme = 'light';
  }
  // 统一替换所有按键的主题类
  for(let i = 0; i < tone.length; i++){
    tone[i].classList.replace(oldTheme, newTheme);
  }
  // 同步更新主题按钮的类
  butt.classList.replace(oldTheme, newTheme);
  // 更新主题状态，用取模写法更简洁
  a = (a + 1) % 3;
}

补充说明 #

classList.replace方法仅当元素上存在要替换的旧类时才会执行修改，不会抛出错误，因此你之前调整索引后没有控制台报错，但逻辑错误导致样式不生效。

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