0

Preciso que o botão mude de cor toda vez que clicado, eu utilizei o focus mas não me traz o resultado esperado, pq depois que o botão é clicado, o usuário precisa clicar em outro canto, sendo assim, o background da cor volta ao 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>

Existem esses botões, e o usuário pode clicar em um botão, mas ele pode mudar de escolha e clicar em outro, nisso a cor do anterior clicado deve voltar ao normal e o novo clicado mude de cor.

JS

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

Fiz esse código, mas por alguma razao ele sempre acaba pegando o botão clicado e também o primeiro botão.

5
  • O objetivo é mostrar quando um botão foi pressionado, tipo uma escolha? Se for, por que não usar um radio? Commented 23/07/2018 às 16:50
  • Não achei claro o suficiente Commented 23/07/2018 às 16:57
  • @RicardoPontual sim, pq preciso que seja feito sem radio
    – Maria
    Commented 23/07/2018 às 16:59
  • @VME o que voce nao entendeu?
    – Maria
    Commented 23/07/2018 às 16:59
  • Poderia informar o javascript utilizado que não resultou como deveria? Commented 23/07/2018 às 17:00

3 Respostas 3

0

Pode fazer dessa maneira, apenas adicionando uma classe buttonClicked com javascript (removendo antes de todos os outros)

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>

0

Como parece que vc está usando Bootstrpa pelas classes dos elementos, Vc pode optar pelo próprio jQuery que vc já deve ter no projeto e fazer dessa forma:

$(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>

-1

Já que você deseja que o fundo do botão fique vermelho, por que não usar a classe .btn-danger nativa do próprio Bootstrap? (veja a lista de classes de botões).

Basta adicioná-la no botão clicado e remover dos outros. Agora, você pode capturar o clique pela classe .bot-click através do próprio jQuery sem ter que incluir em cada botão um evento de clique para enviar o id do botão para uma função. Seu código ficará muito mais enxuto e eficiente.

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .