Change background color when clicking

Question

Change background color when clicking

Navigation

#1 by (-1 votes)
#2 by (-1 votes)
#3 by (-1 votes)

0

I need the button to change color every time I clicked, I used the focus but it does not bring me the expected result, because after the button is clicked, the user needs to click on 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 of choice and click on another, in that the color of the previous one clicked should return to normal and the new click changed 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.

javascript html jquery css

asked by anonymous 23.07.2018 / 18:24

3 answers

-1

You can do this 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>

23.07.2018 / 19:04

-1

As you seem to be using Bootstrpa for the element classes, you can choose the jQuery that you should already have in the project and do this:

$(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><divclass="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>

23.07.2018 / 19:22

How to display objects from a list? [duplicate] Site optimization - Leverage browser cache

score -1 · Accepted Answer

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

Just add it to the clicked button and remove it from the others. You can now capture the click through the .bot-click class through jQuery itself without having to include in each button a click event to send the id of the button to a function. Your code will be much leaner and more 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><linkrel="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><divclass="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>