使用CSS与JavaScript修改按钮颜色失效问题咨询

问题原因 #

1. JS选择器错误：你代码中使用document.getElementsByClassName("button")获取按钮，但你的按钮类名是btn，没有名为button的类，导致点击事件根本没有绑定到按钮上，自然不会有任何反馈。
2. CSS样式规则错误：你使用了:active伪类，这个伪类仅在按钮被按住（未松开鼠标）的瞬间生效，松开就会失效，和你JS里动态切换的active类完全不匹配。

修复步骤 #

• 修改CSS代码，添加.btn.active的样式规则，可直接替换原来的.btn:active规则：

/* 替换原有的.btn:active代码段 */
.btn.active {
  background-color: #E68352;
}

• 修改JS代码中的选择器，把获取按钮的代码调整为：

// 替换原有的buttons定义行
var buttons = document.getElementsByClassName("btn");

修复完成后点击按钮就会正常触发类名切换，选中状态下保持#E68352的颜色，座位计数功能也会同步正常运行。

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