Change multiple button colors when clicked

Question

I need help making getting multiple buttons to change color when clicked and go back to the previous color when clicked a second time.

Here is my code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .choices{
      background-color:#F0F3F4;
      padding:15px 32px;
      display:inline-block;
      font-size:16px;
      font-family:century gothic;
      font-weight:bold;
      margin:6px 4px;
      cursor:pointer;
      border-radius:12px;
      border:2px solid #5D6D7E;
    }

    .choices:hover{
      background:#D0D3D4;
    }
  </style>
  <script>

  </script>
</head>
<body>
  <div>
    <button class="choices" type="button" id="button" >Grapes</button>
    <button class="choices" type="button" id="button">Bananas</button>
    <button class="choices" type="button" id="button">Strawberries</button>
    <button class="choices" type="button" id="button">Apples</button>
  </body>
</html>

I'm not super experienced with javascript so I think I just need help figuring out how I can use javascript to solve the problem.

Daniel Abdelsamed · Accepted Answer · 2018-01-05T02:03:52.623

2

Perhaps you want to use the checkbox html input tag instead of a button

<input type="checkbox" id="grapes" value="grapes" name="fruit"/>
<label for="grapes">
    <div class="choices">Grapes</div>
</label>

Upon your request, here is a javascript approach.

<button class="choices" onClick="buttonClick(this)">Grapes</button>
<script>
    function buttonClick(element){
        element.classList.toggle('active');
    }
</script>

Then you can style your active class to whatever you want when the button is active

edited Jan 05 '18 at 02:03

answered Jan 05 '18 at 01:43

Daniel Abdelsamed

453
2
9

Thanks but I think it would be easier to add javascript. However I'm not very experienced with javascript so I need some help – Jan 05 '18 at 01:48
I updated the answer to include a javascript representation of what you want to do – Daniel Abdelsamed Jan 05 '18 at 02:04
Thank You! This was very helpful – Jan 05 '18 at 02:09

score 0 · Answer 2 · answered Jan 05 '18 at 02:12

this is an working example of what you are looking for:

https://jsfiddle.net/zsydyc/cxkp0r4f/

Some note: 1. you shouldn't have duplicate id in your html 2. I added data-color to your html to store the color, but you can also put the colors to JS

JS looks like this:

$(document).ready(function(){
var background_color = "white"; //white by default
var pre_color = "";
var cur_color = "";
$(".choices").click(function(){
    var cur_color = $(this).attr('data-color');
if (cur_color != background_color){ //first time click or click on a different button
  pre_color = background_color;
  background_color = cur_color;  
  //change body background as an example
  $('body').css("background", background_color);
}
else{ //second time click
    $('body').css("background", pre_color);

}
})
})

joginder singh · Answer 3 · 2018-02-26T08:14:03.887

As mentioned by Daniel, The thing that you are trying to achieve can be done by using checkbox and you can make it look like just a box ( without any tick mark ). You don't need any javascript for this and should avoid when you can do it with css.

css:

.choices{
  background-color:#F0F3F4;
  padding:15px 32px;
  display:inline-block;
  font-size:16px;
  font-family:century gothic;
  font-weight:bold;
  margin:6px 4px;
  cursor:pointer;
  border-radius:12px;
  border:2px solid #5D6D7E;
}

.choices:hover{
  background:#D0D3D4;
}
input:checked+label>choices {
  background: red;
}

input{
  display: none
}
input:checked+label>.choices {
  background-color: red !important;
}

html:

<html>
<body>
<input type="checkbox" id="grapes" value="grapes" name="fruit" />
<label for="grapes">
<div class="choices">Grapes</div>
</label>

<input type="checkbox" id="Bananas" value="Bananas" name="fruit" />
<label for="Bananas">
<div class="choices">Bananas</div>
</label>

<input type="checkbox" id="Apples" value="Apples" name="fruit" />
<label for="Apples">
<div class="choices">Apples</div>
</label>

<input type="checkbox" id="Strawberries" value="Strawberries" name="fruit" />
<label for="Strawberries">
<div class="choices">Strawberries</div>
</label>


</body>

</html>

see https://codepen.io/jogind3r/pen/MrEOaN

Change multiple button colors when clicked

3 Answers3