Access hypeDocument from the innerHTML

Elements
1

I wrote a script inside the innerHTML of a Text element. I was geeting this error while trying to access other element's data using the Hype API:

ReferenceError: Can't find variable: hypeDocument

Later, I did the same thing using jQuery without an issue. How to solve this issue for the Hype API? Please see the attachment to understand the issue. Thanks!

hypeDocument innerHTML.zip (11.6 KB)

2

Straight javascript also works:

document.getElementById('id').innerHTML = 'Got the hypeDocument reference!';


But the API is a non-starter... in the console the following appears: 
APPLY ERR w=Please check the innerHTML of this element
<script>
hypeDocument.getElementById('id').innerHTML = 'Got the hypeDocument reference!';
</script>
 : ReferenceError: Can't find variable: hypeDocument

i.e. this script runs before Hype’s API establishes its bona fides.

1 Like
3

<script> tags within inner HTML are executed in the global/window scope and thus do not have a hypeDocument object – it is the same if you were executing on the head.

You can reference it via HYPE.documents["documentName"] (though this is dependent on your export) or capture the global variable at an early time such as On Document Load with head HTML code that would look like this:

<script>
  function myCallback(hypeDocument, element, event) {
    window.hypeDocument = hypeDocument;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

 </script>

(I’d probably recommend a name change for window.hypeDocument in this case, but that’s the idea)

2 Likes