Class instead of element


#1

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?


(Mark Hunte) #2

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";
}
 
}

(Jonathan Deutsch) #3

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.


(Mark Hunte) #4

@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


#5

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)


(Mark Hunte) #6

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

(Mark Hunte) #7

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(...


#8

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.


(Mark Hunte) #9

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.