Change background-color when click

Question

I need the button to change color every time clicked, I used Focus but does not bring me the expected result, because after the button is clicked, the user needs to click another corner, so the background color back to normal.

    <div class="container">
    <div class="row">
      <div class="col-sm">
        <button type="button" class="btn btn-primary bot-click" id="E" onclick="botaoClicado(this.id)" value="Red">CASA FECHADA</button>
      </div>
      <div class="col-sm">
        <button type="button" class="btn btn-primary bot-click" id="D" onclick="botaoClicado(this.id)" value="Red">ENDEREÇO NÃO LOCALIZADO</button>
      </div>
      <div class="col-sm">
        <button type="button" class="btn btn-primary bot-click" id="G" onclick="botaoClicado(this.id)">CLIENTE REAGENDOU</button>
      </div>
    </div>
</div>

There are these buttons, and the user can click on a button, but he can change choice and click on another, that the color of the previous clicked should return to normal and the new clicked change color.

JS

var bot = window.idBotaoClicado
      function botaoClicado(e) {
      bot = e
      document.querySelector('.bot-click').style.background = 'Red'
    }

I made this code, but for some reason it always ends up getting the button clicked and also the first button.

Answer 1

You can do so by just adding a buttonClicked class with javascript (removing before all others)

let myButton = document.querySelectorAll('.button-group > button');

myButton.forEach(function(key){
    key.addEventListener('click', function(){
        removeStyles();
        this.setAttribute('class', 'buttonClicked');
    });
})

function removeStyles(){
    for(let i = 0;i < myButton.length;i++){
        document.querySelectorAll('.button-group > button')[i].removeAttribute('class');
    }
}

.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-group > button {
    box-shadow: none;
    border: 1px solid #cecece;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
}

.buttonClicked {
    background-color: #628cea !important;
    color: #fff;
}

<div class="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>

Answer 2

Since it seems that you are using Bootstrpa for the classes of the elements, Vc can opt for the jQuery that you already have in the project and do so:

$(document).ready(function(){
  $("button").click(function(){
      $("button").removeClass("buttonClicked");
      $(this).addClass("buttonClicked");
  });
});

.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-group > button {
    box-shadow: none;
    border: 1px solid #cecece;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
}

.buttonClicked {
    background-color: #628cea !important;
    color: #fff;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>

Answer 3

Since you want the bottom of the button to turn red, why not use the class .btn-danger native to Bootstrap itself? (see the list of button classes).

Just add it on the clicked button and remove from the others. Now, you can capture the click by class .bot-click through jQuery itself without having to include in each button a click event to send the id from the button to a function. Your code will be much more streamlined and efficient.

$(document).ready(function(){
   $(".bot-click").click(function(){
      $(".bot-click")
      .removeClass("btn-danger"); // remove a classe de todos
      $(this)
      .addClass("btn-danger"); // adiciona a classe ao botão clicado
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="E" value="Red">CASA FECHADA</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="D" value="Red">ENDEREÇO NÃO LOCALIZADO</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="G">CLIENTE REAGENDOU</button>
      </div>
   </div>
</div>