点击按钮后修改按钮背景色的代码不生效该如何解决？

代码无法运行的核心问题出在DOM样式操作的写法上：

• JavaScript中访问元素style对象的属性时，CSS属性名里的中划线-会被识别为减号运算符，因此带中划线的CSS属性必须转换为驼峰格式才能正常调用，你写的style.background-color属于非法语法，会直接触发JS报错中断执行
• 按钮本身挂载了Bootstrap的btn-dark类，自带深色背景、边框样式，即便修正语法后只改背景色，也可能出现深色边框和绿色背景不协调的显示问题

最小改动方案（直接修正样式写法） #

仅需修正style属性的写法即可，可选同步修改边框色适配绿色背景：

function vote(answerId,rateValue){
    alert(rateValue);
    axios.post('/saveRatings?answerId=' + answerId + '&rateValue=' + rateValue, {})
    .then(function(response){
        const voteBtn = document.getElementById("btn");
        // 驼峰写法调用背景色属性
        voteBtn.style.backgroundColor = 'green';
        // 可选：同步修改边框色，避免样式违和
        voteBtn.style.borderColor = 'green';
    })
}

更规范的方案（适配Bootstrap框架逻辑） #

如果你的项目用了Bootstrap，直接替换按钮类比写内联样式更符合框架设计，样式也更统一：

function vote(answerId,rateValue){
    alert(rateValue);
    axios.post('/saveRatings?answerId=' + answerId + '&rateValue=' + rateValue, {})
    .then(function(response){
        const voteBtn = document.getElementById("btn");
        // 移除原有深色按钮类，添加框架自带的绿色按钮类
        voteBtn.classList.remove('btn-dark');
        voteBtn.classList.add('btn-success');
    })
}

补充提示：如果页面存在多个投票按钮，不要给所有按钮都加id="btn"，id在页面中必须唯一，多按钮共用id会导致只有第一个按钮能正常触发样式修改，这类场景建议给按钮绑定通用类名，通过点击事件的target对象获取当前操作的按钮即可。

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