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."');>";
}

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."');>";
}

• javascript
• php
• html
• css

Share Improve this question Follow asked Nov 3, 2015 at 20:04 user5089907user5089907 5

• 3 You should use CSS classes for that use case and then with jQuery (or pure JavaScript), change the button classes as you wish. That should be handled on the click event. – Lior Erez Commented Nov 3, 2015 at 20:06
• I want pure JavaScript. I guess, I will have to write 24 classes.. true? – user5089907 Commented Nov 3, 2015 at 20:10
• @ErikJackson You just need 2 classes, one for the original grey and one for the blue color. – Spencer Wieczorek Commented Nov 3, 2015 at 20:11
• well, the answer given below by Verma is working fine. Is it a good practise to use a code where a loop is run 24 times in a single button click. Does it make the process slow? – user5089907 Commented Nov 3, 2015 at 20:12
• 1 As @SpencerWieczorek said, you only need 2 classes, one for the normal state, and one for the clicked state. Then you can use JavaScript to toggle the clicked state class whenever you click on a button. Don't forget to remove the clicked class from all the other buttons. – Lior Erez Commented Nov 4, 2015 at 14:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Use jQuery.

Working Example (JS Fiddle): https://jsfiddle/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>

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>

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";}}
}