实现点击切换样式的按钮无法正常在开关状态来回切换如何解决？

问题原因 #

• 逻辑判断结构错误：你使用了两个独立的if判断而非if...else互斥分支结构，当点击触发事件时，第一个if判断valueto === "off"成立后，会将valueto赋值为"on"，紧接着第二个if判断valueto === "on"也会满足条件，相当于两个分支的代码会在同一次点击里先后执行，样式修改完立刻被反向覆盖还原，看起来就像没有效果。
• 属性名拼写错误：第二个分支中背景色属性名拼写错误，把backgroundColor少写了字母k，写成了bacgroundColor，导致该属性赋值不生效。

修复方案 #

直接修改原有代码 #

你可以直接替换JS部分的代码为以下版本：

var valueto = "off";
let testerbutona = document.getElementById("testerbuton");
testerbutona.addEventListener('click',function(){
  if(valueto === "off"){
    testerbutona.style.backgroundColor ="black";
    testerbutona.style.border ="3px solid white";
    testerbutona.style.color ="white";
    valueto = "on";
  // 改为else实现分支互斥，同一次点击只会执行一个分支
  } else {
    // 修正backgroundColor的拼写错误
    testerbutona.style.backgroundColor ="white";
    testerbutona.style.border ="3px solid black";
    testerbutona.style.color ="black";
    valueto = "off";                                  
  }
})

更推荐的优化方案 #

通过切换类名实现样式切换，避免直接操作style，可维护性更高：

1. 先在CSS中新增激活态样式：

.buttons-for-the-books.active{
  background-color: black;
  border-color: white;
  color: white;
}

2. JS简化为直接调用类名切换方法：

const testerbutona = document.getElementById("testerbuton");
testerbutona.addEventListener('click', () => {
  testerbutona.classList.toggle('active')
})

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