Change inner svg properties help

Using JavaScript with Hype
1

Hi Max

I think this can help me with something I’m trying to achieve but after following your steps it still doesn’t work. I’m probably not doing this right as and would be grateful if you could help me.

I have a <button> element in my document which contains an svg. So in the inner HTML of the button I would like to run a function on mouseover and mouseout. This function (change_colour) exists outside of the button.

SVG colour change.zip (17.2 KB)

Thanks for your help!

2

This is a the extension thread and rather not a support thread. But you can use getHypeDocument to get a reference to the Hype API without hardwiring the document name. You don’t get access to anything presented in the GUI apart of that. You can use regular mouseover/out handler on your inner HTML and trigger a Hype function using this helper. There are code examples in the first post.

3

I inserted the code you provided into the head HTML but I’m not sure if I also have to put the script seen in the first picture into my button’s Inner HTML. Also, I’m trying to reference a hype function in my mouseover/out events like this:

onmouseover="change_colour()" onmouseout="change_colour()"

but something is not working. I would really appreciate any help on this.

4

As shown in the above example include the helper. In your example your missing the helper … onmouseover="getHypeDocument(this).functions().YOURFUNCTION();" etc. I am not on a computer so this is the best I can do for you as I can’t open documents.

5

I added the helper but still no luck. If you manage to find some time have a look yourself:

SVG colour change.zip (17.6 KB)

Thanks for your help!

6

You are using event.type in your function change_colour. This is a Hype specific setting the runtime sets if called through an action stack or from a timeline action. You would have to make two distinct functions like change_clour_red and change_color_green or set the event.type object manually. This is therefor rather a new thread and not a support issue on getHypeDocument. Hype functions have a function signature… meaning you have three variables that are usually set and passed into a regular Hype function call named hypeDocument, element, event. If you manually call a Hype function you will have to populate them manually if you want to use them. Furthermore, I don’t understand why you don’t just call the function from Hype itself and go through all the length to put it into a button in inner HTML.

Here is something along what you want todo without any innerHTML buttons or calls or getHypeDocument apart from the SVG. The rest is done in Hype as it should be:
SVG colour change 2.hype.zip (17,2 KB)

7

What ever you do you need to look at your error logs in the console.
There you will see an error which ends in … : ReferenceError: Can’t find variable: getHypeDocumen

You have missed named the function.
It is getHypeDocument not getHypeDocumen

Ah… I see that you only did that in the test console. But you should have seen it any way.

8

That code fragment wasn’t even needed there and does nothing. The whole use case of using getHypeDocument also makes no sense in this case as the function change_colour works perfectly fine if just applied from Hype itself as all the variables it depends on are populated by the runtime. As demonstrated in the download two post previous.

1 Like
9

Thanks for detailed explanations. I’m still learning so I was just trying to take a different approach but as you say the function works fine if applied within Hype rather than from inner html of the button.

Thanks for your help!