Trouble with switching scenes from Head - Javascript

I dynamically create some links on scene load in a Rect as follows:

obj1 = hypeDocument.getElementById(‘testcat1’);
obj1.innerHTML = “health-service
dental-service”;

When they click on the link, it calls a function in the Head of the Hype Document:

function setCategory (link) {
window.linkText =(link.innerHTML);
HYPE.documents[‘test’].showSceneNamed(‘b’, hypeDocument.kSceneTransitionCrossfade, 1.1);

}

It correct assigns the text of the link, but it doesn’t redirect to the scene named ‘b’

I’ve tried using hypeDocument.showSceneNamed and everything else I could find in the forums.

What am I missing?

Thanks

The code came through as links above. I’ll do it differently here:

obj1 = hypeDocument.getElementById(‘testcat1’);
obj1.innerHTML = “a href=’#’ onclick=‘setCategory(this); return false;’>health-service
a href=’#’ onclick=‘setCategory(this); return false;’>dental-service”;

I got rid of the opening <a bracket so that you could see the code. I don’t know how to enter code in this editor. You get the idea though.

to enter code enclose the code in one backtick, for inline code

`<like this />`

or within 3 backticks on separate lines

```
var like  = "this";
```

:wink:

Difficult to give you more as the context of why you have this code is a little unclear. Could you elaborate? :slight_smile:

Do you want to show scene ‘b’ from the same document?

The main problem is that you have the function in the head HTML. Here, when using hypeDocument it will throw an error saying undefined for hypeDocument (basically the browser, at that point … in the head HTML doesn’t know what hypeDocument is.) hypeDocument is an argument passed in all functions created in your document.

You could set up the function in the same On Scene Load function that does the same thing but allows you to use hypeDocument … like this.

obj1 = hypeDocument.getElementById('testcat1');
obj1.innerHTML = "<a href='#' onclick='setCategory(this); return false;'>health-service</a><a href='#' onclick='setCategory(this); return false;'>dental-service</a>";
	
setCategory = function(link) {
	
    window.linkText = link.innerHTML;
    hypeDocument.showSceneNamed('b', hypeDocument.kSceneTransitionCrossfade, 1.1);
		
}
1 Like

@DBear - Thank You!

@steve_wolk
I assume this line would be for selecting which Scene to go to? (Currently it appears to do nothing.)
i.e. "Health Service" would got to "Scene b"; "Dental Service" would go to a "Scene c", etc.

setCategory = function(link) {
	
    window.linkText = link.innerHTML;
    
    if (linkText == "health-service") {
    hypeDocument.showSceneNamed('b', hypeDocument.kSceneTransitionCrossfade, 1.1);
	} else if (linkText == "dental-service") {
	hypeDocument.showSceneNamed('c', hypeDocument.kSceneTransitionCrossfade, 1.1);
	}
}

Or something else?

1 Like

@steve_wolk

hype’s got its own eventsystem to be called from ‘outside’ (in your case the head section). it enables ‘normal’ support for the hype-API (like within hype)

so create a hype-document-load-listener in the head:

	<script>

  function myCallback(hypeDocument, element, event) {
//this'll be your custom function:
  hypeDocument.customFunction = function(e){
  console.log(e.target)
    }

    return true;
  }

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

 </script>

on sceneload do your populating stuff:

	var a = document.createElement('a');
	a.href = '#';
	a.setAttribute('class', 'myClass');
	a.setAttribute('id', 'myId');
	
	var t = document.createTextNode("Hello Hype");
	a.appendChild(t);

	hypeDocument.getElementById('xxx').appendChild(a);
	
	a.addEventListener('click', hypeDocument.customFunction);

hope i got you right and this’ll simplifie stuff for you …

2 Likes

not sure it simplifies :smiley: but it’s another way

2 Likes

Thank you @DBear! That worked perfectly. And thank you @h_classen for the alternative way.