JavaScript点击按钮颜色

我希望我的按钮在单击其中一个按钮时更改为特定颜色，然后在单击另一个按钮时返回默认颜色。默认颜色为灰色，然后单击按钮时，它将保持橙色，直到单击另一个按钮。我真的不知道如何实现这一点

使用vanilla JS是这方面的一个要求，所以我不能使用jQuery

以下是HTML和JS：

<button type="button" id="button1">1</button>
    <button type="button" id="button2">2</button>
    <button type="button" id="button3">3</button>

...

var userRating

document.getElementById('button1').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 1;
}
document.getElementById('button2').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 2;
}
document.getElementById('button3').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 3;
}

---

如果你能给我指出正确的方向那就太好了！我对这方面很陌生。

一个可能的解决方案是为所选按钮添加CSS类：

button:hover, button.selected {
  ...
}

然后，为按钮设置所选的类，如下所示：

document.getElementById('button1').className = 'selected';

document.getElementById('button1').className = '';

可以按如下方式清除选定的类：

document.getElementById('button1').className = 'selected';

document.getElementById('button1').className = '';

---

完整解决方案如下：

尝试添加类并删除类

必须使用所需的颜色创建选定的类

document.getElementById('button1').onclick = function () {
    this.addClass('class_selected');
    document.getElementById('button2').removeClass('selected');
    document.getElementById('button3').removeClass('selected');
}
document.getElementById('button2').onclick = function () {
    this.addClass('class_selected');
    document.getElementById('button1').removeClass('selected');
    document.getElementById('button3').removeClass('selected');
}
document.getElementById('button3').onclick = function () {
    this.addClass('class_selected');
    document.getElementById('button1').removeClass('selected');
    document.getElementById('button2').removeClass('selected');
}

请查收。 这是您的html：

<div class="buttons-container">
    <button type="button" id="button1">1</button>
    <button type="button" id="button2">2</button>
    <button type="button" id="button3">3</button>
</div>

并使用css类：

.active{
  background-color:orange;
}

---

我希望这对你来说足够了

您可以使用JQuery，这将使它变得更加简单。我不能将JQuery用于这个特定的项目