Controlling several buttons with class name

Using JavaScript with Hype
1

I have several buttons which change colour on mouse click and I do this with a simple .js if/else statement which changes the colour to green if clicked for the first time and then changes the colour to grey if clicked for the second time.

    var colour = element.style.backgroundColor;
if ( colour === "rgb(232, 235, 237)") {
    element.style.backgroundColor = "rgb(0, 255, 153)"
} else {
    element.style.backgroundColor = "rgb(232, 235, 237)" 
}

However, I also have a reset button which changes the colour of all buttons back to grey and I do this by targeting each button with this code:

document.getElementById("q1_b1").style.backgroundColor = "rgb(232, 235, 237)"

Unfortunately, there are 12 of these buttons and I have to have 12 lines of the code above. Is it possible to make this code shorter and use the same classname for all this buttons to change their colour? So far I have been unsuccessful.

Any help appreciated.

Thanks!

2

Hi Greg!

Hype Demo: Class_iteration_JHSv1.hype.zip (15.7 KB)

The code below should meet your request for the reset.
All the buttons that need resetting are given the class name of “.btnReset”.

function reSetButtons

var reset = document.querySelectorAll(".btnReset");
for (i = 0; i < reset.length; i++) {
  reset[i].style.backgroundColor = "rgb(232, 235, 237)";
}
2 Likes