HTML attribute of an element in an inactive scene

1

Hello,
I need do read an HTML attribute stored into an image element from another scene.
When I tried to do that I received a null value.

var searchResultElms = document.getElementsByClassName('IMG');
for (var i = 0; i < searchResultElms.length; i++)
{
	currentElm = searchResultElms[i];
	let Path = currentElm.getAttribute('PATH');
    console.log(Path, currentElm.id, currentElm)
};

I correctly receive element id but not the attribute i setted in hype gui.

Is there a way to do this?

Thanks,
Andrea.

2

I'm guessing due to your use of "IMG," you probably want getElementsByTagName instead of getElementsByClassName.

Otherwise another issue might be that your code is being called before the Hype document has been setup in the DOM. You'd want to add a hook for the HypeDocumentLoad event as shown in this part of the documentation.

If not either of those two issues, feel free to attach a zip of your .hype document so we can get a better sense of how/when your code is being called.

3

FetchSample.zip (83.4 KB)

Thanks Jonathan,
I uploaded a little sample of my project.
it's just a small part and it's not working. I hope this can help you understand what I would like to do. The scene will be used on casparCG so it may look a bit strange.

As you can see the goal is, once the scene is loaded, switching between layouts as quickly as possible, for this reason I would like to avoid downloading the image on layout load.

I know there are easy ways around this but this approach seemed very clean from a code perspective.

Andrea.

4

I solved it by adding this tag into image.

<path>filename</path>

Now I can get the value of all the scene with:

var searchResultElms = document.getElementsByClassName('IMG');
for (var i = 0; i < searchResultElms.length; i++)
{
	currentElm = searchResultElms[i];
    let pathElement = currentElm.querySelector("path");
    if (pathElement !== null) {
      let value = pathElement.textContent;
      console.log(value);
    }
}
5

I'm glad you were able to figure out a workaround.

The general issue is due to how the runtime constructs scenes. When first loading an animation, Hype will create all scenes and elements inside, but generally doesn't apply any specific values. These don't get populated until the first time a scene is shown. So the Additional HTML Attributes don't exist on the elements at the time you're calling your code.

However one exception to this is the Inner HTML property. That's why your second solution works.

I'll note that this is relying on some internals on how the runtime works under-the-hood. This is subject to change in future versions -- there's definitely some performance/memory gains we can achieve by not constructing all the other scenes. (That said, we'd probably include a backwards compatibility mode to not break animations like yours).

I think I would be curious as to why exactly you need to fetch values from scenes not being shown, and if there might be better ways to achieve this?