Referencing Element Id or Class Name

Using JavaScript with Hype
6

You have multiple layouts, so there are multiple elements with the same class name. By using the [0] index, you are only changing the first one, and not all. The first one is probably not on the layout you happen to be looking at. The best way would be to get the element for the scene, and then call getElementsByClassName() on that. There isn’t a built-in way to currently get this, but the Hype Extensions project provides a method to get it. In fact, the example usage is for getting sub elements via class name :slight_smile:.

You could either use that code or just copy/paste the current method. It would look like:


var sceneElement = document.querySelector('#'+hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');

sceneElement.getElementsByClassName('main-headline')[0].parentNode.style.zIndex = 1;
sceneElement.getElementsByClassName('main-subhead')[0].parentNode.style.zIndex = 1;
sceneElement.getElementsByClassName('text-area-bg-org')[0].parentNode.style.zIndex = 2;
2 Likes