Mixing inline js and hype functions

Using JavaScript with Hype
1

I am generating a menu and for each of the menu items I need to fire an onclick event that does something within hype.

var Counter = "'counter'";
    	var Slides = data.feed.entry[i].gsx$slide.$t 
	var Names = data.feed.entry[i].gsx$name.$t 
  	var Links = '<a href="#" onclick="getElementById(' + Counter + ').innerHTML = ' + Slides + ', window.clickCount = '+ Slides +' ;">'+ Names +'</a>';

This part works. Clicking on an item in the resulting menu changes the clickCount and displays it in the innerHTML of the counter. I also have an Init function:

window.clickCount = 0; 
hypeDocument.getElementById("counter").innerHTML = window.clickCount;

and Increase function like this:

window.clickCount += 1;
hypeDocument.getElementById("counter").innerHTML = window.clickCount;

The Increase function is working, and when Increase is called the “counter” innerHTML is updated with a higher number.

Here is the problem:

Because the Increase is a native hype function. I can call it from an onclick event of a button. This button fires a “changePage” function that changes a page based on the clickCount. But I don’t know how to call this “changePage” function from the top inline javascript?

Here is a stripped down version of the project: CustomDeckStripped.zip (21.5 KB)

Thanks.

2

The Hype API for the hypeDocument object has a functions() call which returns an object of all your functions. Step one is to properly get a hypeDocument object that you can use via the API.

There’s a global HYPE object that has the documents on the page, so you could do something like:

var hypeDocument = HYPE.documents["myDocumentName"];

But the "myDocumentName" part is based on your export name; it may change and is typically just “index” when previewing. There’s a few ways to better capture it. One way is to use the Hype event system and listen to HypeDocumentLoads, but the technique I’ve come to favor is when you know there’s only one hype document on a .html page you can simply use:

var hypeDocument = Object.values(HYPE.documents)[0];

From there, you could call your internal function:

hypeDocument.functions().changePage();

All functions take 3 arguments, so if you are calling from an onclick handler it would probably be something like:

hypeDocument.functions().changePage(hypeDocument, this, window.event);

Because of this syntax, I’d recommend against all this code being inline in the <a href> tag and instead just put it within a handler. (If so, you could still pass this, Counter, and Slides values into it).

1 Like
3

Thanks @jonathan

So what I did, I think, is a combination, I put this script into the Head HTML.

	 function PageSelect(hypeDocument, element, event) {
	 
	 var hypeDocument = Object.values(HYPE.documents)[0]; 
		
	 hypeDocument.functions().PageData(hypeDocument, element, event);            
}

And then this is part of the PageData function, which generates those links, that in turn call the PageSelect function in the Head HTML:

for(var i=0; i<data.feed.entry.length; i++){
		
	   	var Slides = data.feed.entry[i].gsx$slide.$t 
		var Links = '<a href="#" onclick="window.clickCount = '+ Slides +', PageSelect();">'+ Names +'</a>';
		loadData(data, i); 
		}

It’s a bit of a round trip, but is working. :dizzy_face:

1 Like
4

Glad you got it!

(side note: is the comma operator before PageSelect() intentional?)

5

@jonathan None of my code is particularly intentional because I don’t really know what I’m doing. :laughing:
I just cobble stuff together by looking at examples and asking questions. So I thought that the comma is how you would show that more than one thing needs to happen onmouseclick. I checked without it and it stops working, so I’m leaving it in.

1 Like