点击评分按钮修改背景色失效问题求助

你的代码存在两个关键问题，导致点击按钮无法触发背景色变化（或仅第一个按钮生效）：

1. 仅选中第一个按钮：document.querySelector('.btn')只会返回页面中第一个匹配.btn类的元素，因此只有第一个评分按钮能响应点击事件，其余按钮点击无反应。
2. HTML重复ID违规：多个<p>标签使用了相同的id="num"，ID在HTML规范中必须唯一，属于语法错误，虽不直接影响点击效果，但会引发后续元素操作的潜在问题。

修正后的代码 #

HTML（修复重复ID问题） #

<ul>
    <li><button class="btn"><p class="num">1</p></button></li>
    <li><button class="btn"><p class="num">2</p></button></li>
    <li><button class="btn"><p class="num">3</p></button></li>
    <li><button class="btn"><p class="num">4</p></button></li>
    <li><button class="btn"><p class="num">5</p></button></li>
</ul>

JavaScript（给所有按钮绑定点击事件） #

// 获取所有.btn元素
const btns = document.querySelectorAll('.btn');

// 循环为每个按钮添加点击事件
btns.forEach(btn => {
    btn.addEventListener('click', function() {
        // 修改当前点击按钮的背景色
        this.style.backgroundColor = 'orange';
    });
});

可选优化（单选评分逻辑） #

如果需要实现「点击一个按钮后，其他按钮恢复默认背景色」的单选评分效果，可修改JS代码如下：

const btns = document.querySelectorAll('.btn');

btns.forEach(btn => {
    btn.addEventListener('click', function() {
        // 重置所有按钮的背景色为默认
        btns.forEach(item => {
            item.style.backgroundColor = '';
        });
        // 设置当前点击按钮的背景色
        this.style.backgroundColor = 'orange';
    });
});

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