Javascript 单击时取消选择html按钮

我想让9按钮（3x3）在点击后进行颜色更改，因此我使用了

.btn:focus

类，在该类中我设置了bg颜色和文本颜色。问题是如果我点击其他地方（在页面的空白点或下面输入的无线类型），这个颜色变化消失了，但是我需要它在那里。它应该消失，只有当我点击一个不同的按钮相同的9组，但我不知道怎么做

我尝试在HTML代码的下半部分使用JS函数，该函数应该向我的9个按钮添加一个类，该类应该为它们着色，但不起作用。 （我刚刚意识到，即使这最后一个JS函数可以工作，我的问题是，如果我单击一个不是已选择的按钮，我会有两个不同颜色的按钮。我不知道如何解决我的问题。）

正文{
字体系列：“开放式Sans”，无衬线；
背景色：白色；
}
.flex col{
显示器：flex；
弯曲方向：立柱；
}
.弹性行{
显示器：flex；
弯曲方向：行；
}
.证明{
证明内容：中心；
}
.对齐{
对齐项目：居中；
}
.均匀地{
对正内容：空间均匀；
}
.中间{
证明内容：之间的空间；
}
.边界{
边框：1px纯黑；
}
.m-0{
保证金：0；
}
.垫片{
显示器：flex；
弯曲方向：立柱；
柔性生长：1；
}
.成长{
柔性生长：1；
}
.橙色{
颜色：橙色；
}
.bold{
字体大小：粗体；
}
.btn{
背景色：白烟；
边界半径：3px；
边界：无；
文字装饰：无；
柔性生长：1；
利润率：10px；
高度：30px；
}
.bg{
背景色：白烟；
}
.tabtitle{
字体大小：粗体；
}
塔里夫先生{
字体大小：小；
}
.介绍{
文本对齐：居中；
}
塔蒂特尔先生{
字号：中等；
}
分区h2{
字体大小：xx大号；
}
续{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
边缘顶部：12px；
光标：指针；
}
.m-7{
边缘顶部：7px；
}
m-14{
利润率：14px；
填充：0px；
}
div输入{
边界半径：3px；
边框：实心1px黑色；
}
div输入：焦点{
大纲：无；
}
里奇迪先生{
文本对齐：居中；
填充：5px50px；
}
塔布科斯蒂先生{
背景色：达克朗格；
边框：实心达克朗日1px；
}
.边界{
边框：实心达克朗日1px；
}
布莱克先生{
颜色：黑色；
}
怀特先生{
颜色：白色；
}
.m-左-50{
左边距：200px；
}
.x-small{
字体大小：x-small；
}
塔布科斯蒂先生2{
边框顶部：0px；
边框：实心达克朗日1px；
}
.左边距{
左边距：20px；
}
.info{
宽度：215px；
高度：20px；
}
.info2{
宽度：75px；
高度：20px；
利润率：10px；
}
.小{
字体大小：小；
}
.unbtn{
边界：0px；
宽度：20vw；
高度：30px；
背景色：白烟；
}
.unbtn：焦点{
大纲：无；
背景色：达克朗格；
颜色：白色；
}
.隐藏{
显示：无；
}
.btn2{
背景色：达克朗格；
颜色：白色；
边界：无；
文字装饰：无；
柔性生长：1；
利润率：10px；
高度：30px；
}

文件
potrebbero优质酒店
埃塞尔i成本i
德拉阿提维塔酒店
运输和运输产品a

格鲁波·辛尔吉亚？
卡尔科拉·伊尔·托维沃！
管理时间：生产管理时间和管理时间的压缩时间

戴尔·奥尔丁，国家和国际交通运输部部长。
斯托卡乔的塔里法：保护新闻界的新产品价格
斯特鲁图拉。
普罗多托提波罗吉亚酒店

阿比格里亚门托e斯卡普酒店
宠物与食品
自由节奏运动
电子信息
库奇纳之家酒店
汽车发动机
餐饮
贝列扎礼炮
阿尔特罗
尺寸I产品
标准
三浦福里酒店
每件产品的插入尺寸（cm）

布斯塔35x25x3
布斯塔39x31x5
斯卡托拉27x16x10
斯卡托拉24x15x17
Scatola 37x28x8