How to change button's color individually in a group of button from another bigger group of buttons

Question

I would like to change button color individually when i click.

Requirement:

1. Buttons default color: grey, First Click: Green, Second Click: Red, Third click: go back grey.
2. The button is in a group of button from another bigger group of color.

I'm stuck in JS. I'm not sure how to make the button color change (grey, red and green).

Please help.

var SafetybtnColor = document.getElementsByClassName('Safetybtn');
var Safetybtns = document.querySelectorAll('button.Safetybtn');
SafetybtnColor.onclick = function() {
 
}

<h>Group 1</h>
<div style="position:relative; top:5px" class=Safetybtn>
          <button id="s1">1</button>
          <button id="s2">2</button>
          <button id="s3">3</button>
          <button id="s4">4</button>
          <button id="s5">5</button>
</div>
<br>
<h> Group 2</h>
<div style="position:relative; top:5px" class=QualityIntbtn>
          <button id="qi1">1</button>
          <button id="qi2">2</button>
          <button id="qi3">3</button>
          <button id="qi4">4</button>
          <button id="qi5">5</button>
</div>
          
          

Answer 1

Sounds like you need to keep a click counter for each button so as to change to a specific color each time.

You can add a custom attribute to each button like data-clikcs="0" to use as a counter, but I'll just use the button's title for storage because it's easier:

<button id="s1" onclick="this.title=Number(this.title)+1; CycleColor(this.id,this.title)" title="0">1</button>

<button id="s2" onclick="this.title=Number(this.title)+1; CycleColor(this.id,this.title)" title="0">2</button>

<button id="s3" onclick="this.title=Number(this.title)+1; CycleColor(this.id,this.title)" title="0">3</button>

And we'll need a function that each button will call to have its colors changed...

function CycleColor(Which, ClickNum){
    var B=document.getElementById(Which);

    if(ClickNum=='1'){B.style.background='green';} 
    else if(ClickNum=='2'){B.style.background='red';} 
    else {B.style.background='grey';} 
}

Answer 2

For starters, you need to put quotation marks around your class names. Also, note that button.Safetybtn is not a valid selector, as your buttons don't have the class themselves. You're looking for .Safetybtn button, because the buttons are a child or the Safetybtn class. You could also use the child combinator > to denote a direct child, with .Safetybtn > button.

Now that you have the group of buttons, you'll want to loop over them with a simple for loop. Within that loop, simply set the onclick for each Safetybtns[i], wherein you can change the colour with the style property, using this.style.backgroundColor.

Note that the actual background 'grey' for buttons is a rather specific colour: rgb(221, 221, 221).

You'll want an index (in my example selectColour) that gets increased each time you click on the buttons. You'll also want to set it back to zero once it's one less than the number of colours you're looping over (to reset the loop).

I'm not sure of your exact requirements, but here's an example that stores the three colours red, green and grey as an array, and swaps between them whenever any button is clicked:

var Safetybtns = document.querySelectorAll('.Safetybtn button');

var colours = ['green', 'red', 'rgb(221, 221, 221)'];
var selectedColour = 0;

for (var i = 0; i < Safetybtns.length; i++) {
  Safetybtns[i].onclick = function() {
    this.style.backgroundColor = colours[selectedColour];
    if (selectedColour != colours.length - 1) {
      selectedColour++;
    }
    else {
      selectedColour = 0;
    }
  }
}

<h>Group 1</h>
<div style="position:relative; top:5px" class="Safetybtn">
  <button id="s1">1</button>
  <button id="s2">2</button>
  <button id="s3">3</button>
  <button id="s4">4</button>
  <button id="s5">5</button>
</div>
<br>
<h> Group 2</h>
<div style="position:relative; top:5px" class="QualityIntbtn">
  <button id="qi1">1</button>
  <button id="qi2">2</button>
  <button id="qi3">3</button>
  <button id="qi4">4</button>
  <button id="qi5">5</button>
</div>

Hope this helps! :)

Answer 3

You want to create an array of colors to traverse through, and assign the onclick of each button to a function to twiddle the color.

i tweaked your html a bit to add a class to make it easy to identify which buttons should have this functionality. also added a data-* attribute to hold the current 'color' value for each button. this is each buttons state.

<h>Group 1</h>
<div style="position:relative; top:5px" class=Safetybtn>
          <button id="s1" class="colorable" data-color="0">1</button>
          <button id="s2" class="colorable" data-color="0">2</button>
          <button id="s3" class="colorable" data-color="0">3</button>
          <button id="s4" class="colorable" data-color="0">4</button>
          <button id="s5" class="colorable" data-color="0">5</button>
</div>
<br>
<h> Group 2</h>
<div style="position:relative; top:5px" class=QualityIntbtn>
          <button id="qi1" class="colorable" data-color="0">1</button>
          <button id="qi2" class="colorable" data-color="0">2</button>
          <button id="qi3" class="colorable" data-color="0">3</button>
          <button id="qi4" class="colorable" data-color="0">4</button>
          <button id="qi5" class="colorable" data-color="0">5</button>
</div>

the javascript is fairly straightforward

var colors = [
    "lightgray", "green", "red"
];

var btns = document.getElementsByClassName("colorable");
for (idx = 0; idx < btns.length; idx++) {
    var btn = btns[idx];

    btn.onclick = function() {
        var colorIndex = parseInt(this.getAttribute("data-color")) + 1

        if (colorIndex > 2) {
            colorIndex = 0;
        }

        this.setAttribute("data-color", colorIndex);
        this.style.background = colors[colorIndex];
    }
}

the colors array could be rgb values or whatever. i used names for simplicity.

fiddle: https://jsfiddle.net/ns56c34u/