How to select and change color of a button and revert to original when other button is clicked

Question

I have a set of 24 buttons. All are of dark grey (#333333) color. I want them to convert to blue (#0099ff) when I click on any one of them which I'm able to do but after that when I click on some other button, the color of previous one remains to be blue and the new clicked one turns blue too. I want the previous one to revert to it's original color, ie. to dark grey. I'm using this code:

function chcolor(btn) {
var property=document.getElementById(btn);
property.style.backgroundColor="#0099FF";
}

for($i=1;$i<25;$i++) {
echo "<input type=submit value=&gt; id=btn".$i." onclick=chcolor('btn".$i."');>";
}

Answer 1

Use jQuery.

Working Example (JS Fiddle): https://jsfiddle.net/xt1p9y4r/1/

<style>

  input[type=button] {
    background-color: #333333;
    color: white;  
  }

  input[type=button].blue {
    background-color: #0099ff; 
  }`enter code here`

</style>

<div class = "buttons">
</div>

<script>

  for (i = 1; i <= 25; i++) {

    $(".buttons").append("<input class = 'button' type = 'button' value = 'Button " + i + "'><br>");

  }

  $(".button").click(function () {

    $(".button").removeClass("blue"); // Remove 'blue' CSS Class from all Buttons

    $(this).addClass("blue");

  });

</script>

Answer 2

I'm going to suggest an alternative approach to your problem. One thing you can do use have a .grey and .blue class, which contain the background color. Then all you need to do is change the class of the clicked element to .blue and since you are using classes, you can use a selector to change the other items to .grey . Here is the onclick event of a button:

var blueButton = document.querySelectorAll(".blue")[0];
if(this.className == "grey") {
    if( blueButton ) blueButton.className = "grey";
    this.className = "blue";
}

This means if the clicked button has a class .grey , change it to blue and the other button (being document.querySelectorAll(".blue")[0] as there will only be a single blue button or no blue buttons in your case) to .grey . the if-statement is to check if there is even such an element that has the .blue class before changing it's class.

The full code snippet is below:

 var buttons = document.querySelectorAll("button"); for(button in buttons) { buttons[button].onclick = function(){ var blueButton = document.querySelectorAll(".blue")[0]; if(this.className == "grey") { if( blueButton ) blueButton.className = "grey"; this.className = "blue"; } } } 

 .grey{ background-color: grey; } .blue{ background-color: blue; } 

 <button class="grey">Click Me</button> <button class="grey">Click Me</button> <button class="grey">Click Me</button> <button class="grey">Click Me</button> <button class="grey">Click Me</button> <button class="grey">Click Me</button> 

Answer 3

What you can do is change all the other buttons (except the currently selected one) to dark grey color.

function chcolor(btn) {
var property=document.getElementById(btn);
property.style.backgroundColor="#0099FF";
for(var i=1;i<=24;i++) {
if(!(btn=='btn'+i)) {
var property=document.getElementById('btn'+i);property.style.backgroundColor="#333333";}}
}