Class instead of element

So I have this:

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 likely is but without really knowing your setup and what you real goal is…

var interval = element.id;

var buttonX_ = document.getElementsByClassName("buttonX"); 
var h;

for (h = 0; h < buttonX_.length; h++) {

if ( buttonX_[h].id === interval) {
  
   buttonX_[h].style.display = "block";
   
} else {
 
 buttonX_[h].style.display = "none";
}
 
}
2 Likes

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.

@Djon
I did a radio button example a while back which may help if Jonathan is correct about what you are after.


There is also an live demo

I also think I have an example some where of just using Hype elements and no form, will hunt it down

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 :thinking:
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)

A quick look (very quick coding so not as elegant or full proof as I would like… )

The idea is to give each element two class names.

We then can click for instance the blue button rt1
This button has the class names rt1 rt

We then find the answer that also has the class rt1
This answer element will have the class name rtSel rt

we find all the elements with class name rtSel we set them to display none.
We then set the answer elemnt that we first found back to display block.

The reset buttos work similar.

test__mhv1.hype.zip (37.1 KB)

	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;
     
}
2 Likes

P.s one way to also deal with layouts is to use something like.

	hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}
 
var theScene = hypeDocument.currentSceneElement();

If you put that at the top of the code above then where we have code that talks to the whole document like

document.querySelectorAll(…

we change it to be

theScene.querySelectorAll(...

2 Likes

Thank you very much Mark.
Because I don’t like copy paste: When I can understand what you’ve written ( and I probably can :wink:) , I will use the code.

1 Like

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.