Javascript Html按钮点击后颜色改变

希望这是一个非常简单的问题，我正在使用flask和python构建一个web应用程序。在应用程序的前端，我试图让它改变按钮按下的颜色，并恢复任何以前的颜色变化到其他按钮，所以只有最近选择的按钮是不同的颜色

这些按钮是从sql数据库填充的，因此在for循环中都使用相同的html行。以下是我目前拥有的代码：

变色脚本：

<script>
var count = 0;
function setColor(btn, color) {
    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "red"
        count = 0;
    }
    else {
        count = 1;
    }
}

var计数=0；
功能设置颜色（btn，颜色）{
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“红色”
计数=0；
}
否则{
计数=1；
}
}

按钮代码：

 {% for item in categorydata %}
  <tr>
    <button id="{{item[0]}}" formtarget="Items" name="ItemCategory" value={{item[0]}} onClick="setColor('{{item[0]}}', '#101010')" style="color:black;height:50px;width:150px" >{{item[0]}}</button>
  </tr>
  {% endfor %}

{%用于categorydata%中的项]
{{item[0]}
{%endfor%}

---

有什么办法可以做到这一点吗

这样做的一种方法是将类“修改”添加到按下的按钮中，并从先前按下的按钮中删除类“修改”

CSS Javascript HTML

---

对于此类问题，您不需要使用JS。 你要做的就是使用css:focus-psuedo类

例如：

.btn:focus {
 background-color: red;
}

---

使用css：

focus

psuedo类通过单击按钮，可以为当前按钮添加

backgroundColor

，但不能为所有按钮添加清晰的颜色。您可以添加循环，该循环使用所有按钮并清除背景

function calledOnClick(id){
    previousPressedButton =  document.getElementsByClassName("modified")[0]; //there should only be one item, check before hand if items exist ofcourse.
    previousPressedButton.classList.remove("modified")
    pressedButton = document.getElementById(id)
    pressedButton.classList.add("modified")
}

<button id=1 onclick="calledOnClick(this.id)"></button>

.btn:focus {
 background-color: red;
}