Calling functions().myFunction() not working

Using JavaScript with Hype
1

I created a rect box inside of hype with id=‘mybox’. Then added the following code to the inner HTML:

<div style="width:100%; height:100%;" onclick="nextscene();">Click</div>

<script>
function nextscene() {

// This works fine:
var myHypeDocument = HYPE.documents[docName];
var myelement = myHypeDocument.getElementById('mybox');

myelement.style.backgroundColor = "red";
myelement.innerHTML = myHypeDocument.documentName();

// This not working, can't call my function.
myHypeDocument.functions().callMyFunction();

}
</script>

Everything works fine except the last statement which tries to call a custom function. for some reason i can’t get “hypeDocument.functions().callMyFunction();” to work. I’ve tried many variations on this but nothing seems to help. I also tried this: "hypeDocument.functions().callMyFunction(hypeDocument, element, event);"
and this: “HYPE.documents[docName].functions().callMyFunction(hypeDocument, element, event);” just to be clear, docName is a variable I defined elsewhere in the head of my document.

I looked at many examples and this should work. I’m working in Hype 3 Pro on a mac running Yosemite and have tried several browsers.

Please help me!

Thanks Jason W.

Sample Scene:
testJavascript.hype.zip (16.1 KB)

2

why don´t you use a button and call “onClick” a hype-function?
if you want to call a function from within a function you have to use

hypeDocument.functions().name(hypeDocument, element, event);//name = name of called function
3

I was wondering the same thing. It would seem to be more desirable to use the built-in click handlers than script an element’s inner HTML, if it’s at all an option to do so.

4

Try this @JasonW

<div style="width:100%; height:100%;" onclick="nextscene();">Click</div>

<script>
// This works fine:
var myHypeDocument = HYPE.documents[docName];
var myelement = myHypeDocument.getElementById('mybox');

function nextscene() {



myelement.style.backgroundColor = "red";
myelement.innerHTML = myHypeDocument.documentName();

// This not working, can't call my function.
myHypeDocument.functions().myFunction();
};
</script>

Declare your vars outside the callback so that the values persists between calls

Also typo with callMyFunction() it should be myFunction() (this is the name you gave it)

Hope this helps!

D

5

Thanks for your reply, but I think your missing the point of my post.
This example is merely an example of trying to call one of my custom functions from an element in Hype. I could use a slider with an oninput event and I might want to send the value to myFunction. so there is no action built into Hype for that.

The problem is that HYPE.documents[docName].functions().callMyFunction(hypeDocument, element, event); doesn’t work at all. This is the issue here.

Thanks

6

Thanks for the suggestions. Your right, the function name was wrong because I tried to make it more clear in this post. but even with the changes, myFunction won’t execute at all.

7

@JasonW

Did you put the variables outside the function?

Like in my suggestion.

It worked when I tested it

D

testJavascript.hype.zip (23.2 KB)

8

What I think is the standard way of doing this is to put a callback in the HEAD to id the document, rather than hard coding the name.

head

<script language="JavaScript">
	//--
	function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>

You can then refer to the hypeDocument using the window var window.myhypedocument

widget

Click
<script>
function nextscene() {

// This works fine:

var myelement = window.myhypedocument.getElementById('mybox');

myelement.style.backgroundColor = "red";
myelement.innerHTML = window.myhypedocument.documentName();

window.myhypedocument.functions().myFunction(window.myhypedocument);

}
</script>

Notice I use window.myhypedocument also as a argument in the function call.

Which means it will be passed onto myFunction as the hypeDocument argument.

And You can then keep the syntax in the hype function normal.

myFunction()

function myFunction(hypeDocument, element, event) {	
	

hypeDocument.showNextScene();

}
1 Like
9

Yes I did, I studied the differences between your document and mine, and finally discovered that you also changed “hypeDocument.showNextScene();” to “myHypeDocument.showNextScene();”. That seemed to make all the difference after moving the variables outside the function.

10

Thanks for the suggestion, I was wondering about that… I knew that hard coding it wasn’t a good way to do it!

Thanks

11

Thanks much for everything. things are working like a charm now.

I was wondering how you might do something similar inside an HTML Widget. will the window.myhypedocument reference work inside the HTML widget? I can’t seem to get a reference of the Hype document to work with inside.

Any suggestions?