@MarkHunte gets it right. To elaborate more on the ins and outs…
Hype 1.0.x would generate an element ID for you that was shown in that inspector field. You could then get access to the element via document.getElementById(). We changed this to its current behavior in 1.5.0 for these reasons:
- Animations might not work correctly due to ID collisions (more on this below)
- Users (rightfully!) wanted to be able to specify their own IDs instead of use the ugly UUID strings Hype made
- We could significantly reduce the export size by not using such long UUID strings
The element ID itself is used by Hype’s runtime to manipulate the element. It isn’t just for you, it is for us too .
When we generated a specific ID, even though it was really long and unique at the time of generation, there was still the possibility of collisions if you had multiple Hype exports on one page, whether it was an identical animation or due to a copy/pasted element (or duplicated document) that happened to contain that ID. That would mean that we might be animating the wrong element (#1).
We could handle this problem (and #3) by automatically generating IDs when the document is shown on the page. We simply need a small internal ID and then map this to a longer DOM Element ID that we generate. This DOM ID we can basically guarantee not to collide, because Hype’s runtime calls document.getElementById() first to make sure it doesn’t yet exist on the page. So with this, we just say “Automatically Generated” in the inspector, because we really don’t know what the ID will be and we don’t want you to know to mitigate a collision problem.
However, this doesn’t solve #2, where you do want to specify an ID. For this we need another mapping - the user’s intended ID to an actual element. In this case, we do the same basic steps, but instead of generate a random ID when the document is shown in the browser, we try to map it to what you said in the inspector. For the most part this will work fine, but if the global document.getElementById() returns an element because you already have something in the HTML page (either specified by your code, someone else’s code, or a duplicate Hype element), we can in fact make sure there’s not an ID collision and rename the ID to be safe. HTML documents shouldn’t have more than one ID, and that would mess up the runtime as it still needs to use an ID!
Of course, if we rename it, then you cannot get to it via document.getElementById() with the string you expect. Not that you’d be able to otherwise - there’s really no way to know what you’d be getting in the case of a collision. So, we added a hypeDocument.getElementById() API which is smart enough to return the right element by the ID you specified, even if Hype’s runtime actually had to change the ID on the HTML page.
So in short, use hypeDocument.getElementById() where you can - that will return the element you want and be safe against any collisions which might have happened. If there are no collisions, document.getElementById() is going to work too. But given many of us don’t have complete control of the content we’re using or putting on the page, we strongly recommend using the hypeDocument variant.
And just to clarify:
Please do add IDs whenever you need to use them!