Uncertain if the issue lies within the scope, but essentially...
I have a collection of 4 div buttons stored in an array called main_btns. When these buttons are clicked, they toggle between 2 classes to display different background colors.
Similarly, I also have another array named genre_btns containing 12 buttons that switch between 2 other classes with a corresponding change in background color when toggled.
The challenge is to remove the class from one array when switching between buttons in each array. For example, clicking on a button in the genre_btns array should change the background color of that button. However, if you then click on a button in the main_btns array, it should revert the background color of the previously clicked genre_btns button while changing the color of the new main_btns button. In essence, only ONE background color should be displayed when toggling between buttons in each array.
Here is the code snippet:
<!-- array for main_btns -->
<div id="selector">
<div id="btn-atoz" class="class2" onclick="toggleClassMainBtn(this)">
ACTS A-Z
</div>
<div id="btn-headlining" class="class1" onclick="toggleClassMainBtn(this)">
HEADLINING
</div>
<div id="btn-weekend1" class="class1" onclick="toggleClassMainBtn(this)">
WEEKEND 1
</div>
<div id="btn-weekend2" class="class1" onclick="toggleClassMainBtn(this)">
WEEKEND 2
</div>
</div>
<!-- array for genre_btns -->
<div id="genre">
<div id="btn-alternative" class="class3" onclick="toggleClassGenreBtn(this)">
ALTERNATIVE
</div>
<div id="btn-blues" class="class3" onclick="toggleClassGenreBtn(this)">
BLUES
</div>
<div id="btn-country" class="class3" onclick="toggleClassGenreBtn(this)">
COUNTRY
</div>
<div id="btn-dance" class="class3" onclick="toggleClassGenreBtn(this)">
DANCE
</div>
<div id="btn-electronic" class="class3" onclick="toggleClassGenreBtn(this)">
ELECTRONIC
</div>
<div id="btn-hip-hop-rap" class="class3" onclick="toggleClassGenreBtn(this)">
HIP-HOP/RAP
</div>
<div id="btn-jazz" class="class3" onclick="toggleClassGenreBtn(this)">
JAZZ
</div>
<div id="btn-metal" class="class3" onclick="toggleClassGenreBtn(this)">
METAL
</div>
<div id="btn-pop" class="class3" onclick="toggleClassGenreBtn(this)">
POP
</div>
<div id="btn-rnb" class="class3" onclick="toggleClassGenreBtn(this)">
R&B
</div>
<div id="btn-reggae" class="class3" onclick="toggleClassGenreBtn(this)">
REGGAE
</div>
<div id="btn-rock" class="class3" onclick="toggleClassGenreBtn(this)">
ROCK
</div>
</div>
<!-- css for button backgrounds -->
<style>
.class1 /* button toggles */
{
background: #cc516d;
}
.class2 /* button toggles */
{
background: #963B50;
}
.class3 /* button toggles */
{
background: #cc516d;
}
.class4 /* button toggles */
{
background: #963B50;
}
</style>
<script>
//toggles for buttons acts A-Z, headlining, weekend 1, weekend 2
function toggleClassMainBtn(x){
var main_btns = document.getElementById('selector').children;
for(var i = 0; i < main_btns.length; i++){
main_btns[i].className = "class1";
}
x.className = "class2";
}
//toggles for genre buttons
function toggleClassGenreBtn(x) {
var genre_btns = document.getElementById('genre').children;
for(var i = 0; i < genre_btns.length; i++){
genre_btns[i].className = "class3";
}
x.className = "class4";
}
</script>