var btn = ['sext1', 'sext2'];
var interval = element.id;
switch (interval) {
case btn[0]:
var x = document.getElementsByClassName("sext1");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "block";
}
var y = document.querySelectorAll(".sext2, .sext3, .sext4, .sext5, .sext6");
var h;
for (h = 0; h < y.length; h++) {
y[h].style.display = "none";
}
and I wonder if this is possible with a class instead of an element?
It looks like you’re trying to do a “radio” style solution? I think ultimately you’ll at least need some code to manage states.
However it doesn’t have to be the style.display if you don’t want it to be. You could define a “selected” and “deselected” class (or a :not(.selected) directive) that is an additional class name added to/removed from the elements that could have the display styles defined in static CSS. In this regard you could add/remove them to the classList or className attribute.
Attached a test version. In the real world there are 16 pairs of 6 different colors. I want to try not using element.id’s because of separate scenes for iPad & iPhones. since I’m not much of a JS guru, I’m glad I got it working for the iPad. Making it work for the iPhone as well gives me extra work to change all the element id’s.
Although I could live with that
A more elegant solution would be nice of course.
test.hype.zip (26.9 KB)
In the meantime @MarkHunte and @jonathan thank you for help.
(when this project is finished I’ll dive deeper into JS)
var thisSelClass = element.classList[1]
var thisSelClassType = element.classList[2]
var allRTClass = document.querySelectorAll(".rtSel")
var allBSClass = document.querySelectorAll(".bsSel")
var currentClassSel = document.querySelectorAll("." + thisSelClass)
switch(thisSelClassType) {
case "rt":
for (i = 0; i < allRTClass.length; i++) {
allRTClass[i].style.display = "none"
currentClassSel[0].style.display = "block";
}
break;
case "bs":
for (i = 0; i < allBSClass.length; i++) {
allBSClass[i].style.display = "none"
currentClassSel[0].style.display = "block";
}
break;
case "resetBS":
for (i = 0; i < allBSClass.length; i++) {
allBSClass[i].style.display = "block"
}
break;
case "resetRT":
for (i = 0; i < allRTClass.length; i++) {
allRTClass[i].style.display = "block"
}
break;
}
Also in you code when you do write it, rather than use single character var names it is a good idea to use full descriptive names.
This helps you and others to be able to follow the code now and in the future and also avoids clashes with other codes global vars.