Select all elements

Using JavaScript with Hype
1

Hello.

I’m looking for a way to select all elements (except a few) to affect all of them together using (vanilla) JavaScript.

This is the code I’m using: var divs = document.querySelectorAll('div:not(.noselect)); where noselect is the class of the elements I want to exclude. However, the browser console returns this as undefined elements. What’s the best way to select all elements in a Hype document?

2

Hype has some base classes it uses. You would probably only want to select specific one as Hype wraps each element in a “container”.

.HYPE_scene
.HYPE_element_container
.HYPE_element

I’d think your after all HYPE_element's that would only require a
divs = document.querySelectorAll('.HYPE_element');

If you want to use your approach but it should be limit to HYPE_element use the following
divs = document.querySelectorAll('.HYPE_element:not(.noselect)');

Hope this Helps

Also have a look at

3

I still get an error in console:

Error in undefined: TypeError: Cannot set property 'filter' of undefined

My code:

var divs = document.querySelectorAll('.HYPE_element:not(.noselect)');
divs.style.filter = 'blur(20px)';

Here’s my file: Proton.hype.zip (726.4 KB)

It’s actually a project I’m making as a college assignment. In that, you can see that, on the fist scene (Home), on the 1920px layout, I have a timeline named Item1. I’m running the above function on 00:15 in that timeline. That timeline gets triggered when the group named Item 1 (inside the group Menu) is clicked on.

EDIT:

I read the link you sent and update my code to this:

var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm = hypeSceneElm.querySelectorAll('.HYPE_element:not(.noinvert)');
searchResultElm.style.filter = 'invert(1)';

I still get the same error.

4

It pretty simple … querySelectorAll returns a list of elements. You can’t assigns a filter to a list only to single elements. In the link there is an example for a loop over a list.

5

I'm not sure what you're trying to do exactly, but I've been using classes and JavaScript as a combo to modify elements.

Get Elements By Class Name...

...because Class Names can be added/removed dynamically...

6

I'm trying to apply a filter on all elements in the DOM except for a few. So, instead of selecting each element and filtering it one by one, I thought I could select all and exclude a few. I couldn't find a way to exclude certain elements when selecting them using getElementsByClassName(), instead, I found querySelectorAll(), but, I can't seem to be able to use it properly.

7

Oh, I see. Thanks for the info.

I could get it working by doing this:

var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm = hypeSceneElm.querySelectorAll('.HYPE_element:not(.noinvert)');
searchResultElm.forEach(function(currentElm, index)
	{
		currentElm.style.filter = 'invert(1)';
	});

However, it's applying the filter even on the elements with the class .noinvert. It's probably because even though those elements have the .noinvert class, they also have the .HYPE_element class (just a guess). So, I'd probably have to remove the .HYPE_element class from all the elements which have .noinvert class. If this is correct, can someone tell me if that's a safe way? Probably Hype recognises its elements with that class or something (even though they all have unique IDs). Would there be any problems if I remove the default class. Also, if not this way, how else can I go about this?

EDIT: I experimented with the guess I made above and it turns out I was right. So, this is my new code:

var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm1 = hypeSceneElm.querySelectorAll('.noinvert');
searchResultElm1.forEach(function(currentElm1, index1)
	{
		currentElm1.classList.remove('HYPE_element');
	});
var searchResultElm2 = hypeSceneElm.querySelectorAll('.HYPE_element');
searchResultElm2.forEach(function(currentElm2, index2)
	{
		currentElm2.style.filter = 'invert(1)';
	});

This is serving my purpose, but, as I asked before, is it safe to use this? I'm removing .HYPE_element class from some elements.

8

Not sure what your doing … my guess your assigning the CSS class “noinvert” in Hype with a dot. They don’t need the dot in the interface as the field already makes it clear. Also don’t remove HYPE_element, bad idea :wink:

image
image.png1508×620 34.2 KB

Code is just this:


var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm = hypeSceneElm.querySelectorAll('.HYPE_element:not(.noinvert)');
searchResultElm.forEach(function(currentElm, index)
{
	currentElm.style.filter = 'invert(1)';
});

invert.hype.zip (12,6 KB)

2 Likes
9

BTW. Another way would be to select all HYPE_element's using the suggestions from @Photics and don’t act on ones with the class noinvert but that defies the purpose of having the powerful querySelector and querySelectorAll at our disposal and doesn’t allow using the nice forEach-Loop.

var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElms = hypeSceneElm.getElementsByClassName('HYPE_element');
for (var i = 0; i < searchResultElms.length; i++)
{
	currentElm = searchResultElms[i];
	if (!currentElm.classList.contains('noinvert')) {
		currentElm.style.filter = 'invert(1)';
	}
};
2 Likes
10

Well, even I have no idea why it's not working in my case and no, I'm not using a . in Hype IDE.

11

This one works perfectly, thanks a lot!