Determine the class of an object on click?

Using JavaScript with Hype
1

Is there a method to determine the class of the item you just clicked... I have been working with the ID but a unique ID won't work in this case.

In other case, in the past - I have used the class to determine how many of a type of item there are, and then run interations :

var yestyle_checks_all = document.getElementsByClassName('yestyle_checks_all');
for (i = 1; i < yestyle_checks_all; i++) {
//do the iteration mambo here
}

and that worked awesomely!!! because its basically counting the number of them. however, my experience stops there and in this case I am looking at now, here is my scenario, and its Kinda the opposite of the above...

somone clicked on a thing. unique id doesnt work in the additional breakpoint layouts, can't use persistent symbols in this case...

so i need to know instead 1. what is the class of the object when its clicked on clicked on so I can 2. throw that into a variable and 3. run a switch command on that value

2

Using querySelector instead of getElementById

1 Like
3

You can find this how to here.

Test an elements class name using classList and contains

In brief.

An element can/may have more than one class name.

Hype elements already have a class name given to them by the app. This is not shown in hypes UI.

When you add a class name to an hype element that elements class list count will go up.

You can access the class kist with

element.classList

This will return an object with the class names.

You can directly test if the class list contains a class name.

if (element.classList.contains('foo')){
	 // - -  do stuff
	 
	}

Or you can use the the index integer ( position in the class list )

If you give the element on class name in the ui then its index number will be 1.

So you could get the class name sitting on position 1.

var theClass = element.classList[1]

If you give the element more than 1 the index number for each will match the order in the ui.

Note the index actually starts at 0 but the 0 position is taken by the hype assigned class mentioned above

3 Likes