Is there a way to change the button colors individually when they are clicked?
Requirements:
- The default color of the buttons should be grey. Upon first click, they should turn green. After the second click, they should become red. Finally, on the third click, they should revert back to grey.
- These buttons are part of a group within a larger group with various colors.
I am currently stuck in JavaScript and unsure how to achieve the desired button color changes (grey, red, green).
Please provide assistance.
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>