Três botões, quando um é selecionado, só este deve mudar de cor
Olá! Imagino que um tópico desse é vergonhoso, porém sou péssimo em Javascript e se fosse outra linguagem eu resolveria com loop, mas enfim. Tenho três botões que quando um é selecionado este muda seu background-color (até aí blz). Porém se eu clicar em outro o anterior permanece com o background-color alterado até que o mesmo receba novamente o clique, substituindo assim, a classe css atual pela anterior, pois esse foi o único jeito que arrumei, mas o correto é que assim que um outro botão receba o clique, o anterior perca o seu "focus".
Javascript
function changeBgColor(element) {
if(element.className === 'btn_clicado') {
element.className = 'btn_desclicado';
} else if (element.className === 'btn_desclicado'){
element.className = 'btn_clicado';
}
html
<div id="procura_cliente">
<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px;">Comprar</button>
<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;border-bottom-right-radius: 0px; border-top-right-radius: 0px;">Alugar</button>
<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;">Lançamentos</button>
</divDiscussão (3)
Carregando comentários...