如何为按钮添加点击样式并移除上一个已点击按钮的样式？

你当前代码只实现了点击当前按钮加样式的逻辑，没有处理其他按钮的样式重置，所以会出现多个按钮同时带红色样式的问题，修改逻辑非常简单：每次触发按钮点击时，先遍历所有按钮清空激活样式，再给当前点击的按钮加上样式即可。

方案1：直接修改内联样式（适配你现有代码，改动最小） #

你现有的HTML结构不需要调整，只需要修改JS逻辑即可：

var buttons = document.querySelectorAll('button')

buttons.forEach(function(btn){
    btn.addEventListener('click', function(){
        // 先遍历所有按钮，清空文字颜色样式
        buttons.forEach(function(btnItem){
            btnItem.style.color = "";
        })
        // 给当前点击的按钮设置红色
        btn.style.color = "red";
    })
});

方案2：CSS类控制样式（更推荐，易维护） #

更规范的写法是把激活状态的样式写到CSS类里，后续要调整激活样式（比如加背景色、边框、加粗效果）只需要改CSS，不需要动JS逻辑：

1. 先在CSS里定义激活状态的样式：

.is-active {
    color: red;
    /* 后续要加其他激活样式直接在这里写就行，比如：
    background: #f0f0f0;
    border-color: red;
    */
}

2. JS里通过切换类名实现效果：

var buttons = document.querySelectorAll('button')

buttons.forEach(function(btn){
    btn.addEventListener('click', function(){
        // 移除所有按钮的激活类
        buttons.forEach(function(btnItem){
            btnItem.classList.remove('is-active');
        })
        // 给当前点击的按钮加上激活类
        btn.classList.add('is-active');
    })
});

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