Global variables in functions

Using JavaScript with Hype
1

Hi guys,
I am very embarrassed by asking so many basic questions.
It must be very simple but I can’t figure it out by myself.
I am being able to interact with javascript but I don’t know how to implement a global variable.
In script option I can’t write outside the given function, so whatever variable I create and initialise will be reset to zero (I am initialising a conter variable with zero) as it will be recreated and reinitialised with zero at any click in an assigned button. How can I create a global scope variable and initialise it once and use it in my functions?
I tried lots of things but no success so far.
Thanks again,
Joao

2

In Hype, use the prefix window. for your variable name to make it globally accessible e.g.

window.myGlobalVariable = 0;

You can then assign a variable a value of zero to reset it,

myGlobalVariable = 0; // resetting variable to original value

but you wouldn’t want to “recreate” it because it already exists.

Maybe, you could you share some examples of code you have tried so far. It will give us a better idea of what you are describing.

1 Like
3

When I declare //var window.count = 0;// it gives me an error of unexpected token '. '. Should I just say window.count = 0; instead? Because when I do this way there is no error message but the variable does not initialise as a number.

4

Thanks!
I finally got it!

Thanks!

Forget my last question.

Cheers,

Joao

1 Like
5

You can also put variables in the hypeDocument context as that pointer is passed around in the current document function calls. Makes variables local to your document but accessible across scenes. Window breaches out into the page context but that might just be what you want. I avoid “polluting” the window scope if possible… depends on what you want to accomplish.

2 Likes
6

Thanks Max.
Cheers

7

Max makes a good point. I work exclusively with widgets for iBooks Author and so don’t have to worry about other widgets in the same window. If I did, I’d follow Max’s advice.

2 Likes
8

Woah… where’d your baseball cap go Max? :laughing:

2 Likes
9

Could you give an example how to do this? I tried hypeDocument.myVar but other functions don’t seem to be able to access is. Thanks!

10

Just an example:

Create a init function on scene load put your var in there hypedocument.myVar = 1;

Then make a new mouse click action

hypedocument.myVar+=1; document.querySelector(".myText").innerHTML=hypeDocument.myVar;

Now add a rectangle to your stage and assign it the class myText

Your done

When this work read about hypeDocument.customData (Empty object) as your actually supposed to put that in there but as long as you don’t overwrite keys the API defines you can directly use hypeDocument. You can also define functions this way that get passed around.

11

Ah thanks, realised I need to call the var with hypedocument.myVar rather than just myVar. Looked into the hypeDocument.customData and got it working but makes code bloat up a ton when instead of writing myVar+=1; you’re having to write hypeDocument.customData.myVar+=1;.

Although I made a ‘shorthand’ for hypeDocument.customData called hVar, it’s still a bit cumbersome:

window.hVar = hypeDocument.customData;
hVar.uiToggle = false;
hVar.chaptersToggle = false;
hVar.infoToggle = false;
hVar.mouseActive = function (e) { ... }

viewportDiv.addEventListener('mousemove', hVar.mouseActive);

But like you said, it will keep the vars local and contained…

12

That is why I mostly don’t bother to put stuff in customData and rather into hypeDocument. As long as you know what your doing that is totally fine. Don’t put the shorthand into global space as it then defies the purpose of making it local in the first place. Jut make the shorthand in your function as a first assignment…

var hVar=hypeDocument.customData;

13

Right, that makes sense! Thanks

14

Hello..... so when you say use the prefix window... do you mean use the document head feature? Or are you saying use the identity tab which I don't think it would be there....??

Thanks

15

Using the window.someVariable notation is to be used wherever you have JavaScript, like in the head html within a <script> tag or in hype's javascript functions. It can't really be used in the identity inspector, since those are just labels.

There's only one window object in all the running code for a page, therefore adding any fields to this object results in a global variable that any bit of code can use.

One downside is that every script's code can also write to the window object, so you may find 3rd party scripts conflict and use the same variable names, or that if you have two hype documents on the page, they could be writing to the same variable as well. Therefore using hypeDocument.customData is often recommended, since this is a per-hype-document place to write data. The downside is that hypeDocument is a variable passed into hype's javascript functions but doesn't exist at the global level. You would need to access it via the HYPE.documents outside of a Hype function, and even then it may not yet be created so timing is important.

Does that explain it better?

1 Like
16

Yes I think that sheds more light on this. Thank you Jonathan.

1 Like