Custom function parameter for javascript

Feature Requests
1

It would be nice to be able to pass a parameter to functions from the inspector.

Usage example:
You have a series of buttons that when clicked, change the background color of a particular element, each button changing it to a different color. At the moment, the only way I can figure how to do it is to have something like this:

function button1(hypeDocument, element, event) {
    hypeDocument.getElementById("someElement").style.backgroundColor = "red";
 }
function button2(hypeDocument, element, event) {
    hypeDocument.getElementById("someElement").style.backgroundColor = "green";
 }
function button3(hypeDocument, element, event) {
    hypeDocument.getElementById("someElement").style.backgroundColor = "blue";
 }

So 3 separate functions, one for each button. This can quickly get out of hand if you have a lot of buttons. I’m not sure how you could do this more efficiently at the moment, short of maybe adding the color you want in the button’s element id and extracting it from there, or checking which color to pick based on the button’s position.

It would be nice if when you call a javascript function, you have a text field under it in the inspector where you can enter whatever you want (or nothing!) and the definitions would look like this:

function button(hypeDocument, element, event, extraParameter) {
        hypeDocument.getElementById("someElement").style.backgroundColor = extraParameter;
     }

That way you only write one function for all buttons instead of a separate function for each button, or have to resort to ugly, error-prone tricks.

This is just a quality-of-life feature more than anything, but thanks for reading and considering it :slight_smile:

1 Like
2

You could use either Window.Variable, or what I use is sessionStorage.

I find sessionStorage good as it is removed when the window is closed, so any stored variables don’t clog-up, or localStorage if I need stuff to remain, such as logins.

I also create a function that allows me to deal with sessions, so I can create a json string, so just one variable is stored, but can hold as many as you need.

But passing vars to a function would be good. Also having the ability to add to a DOM, like data- or, rel, name etc.

3

yesWeCan.hype.zip (10.4 KB)

edit: sry, bad post as no explanation. file should show how to pass parameters to hypefunctions.
of course you cann also pass objects and / or arrays as of in js everything is a object :slight_smile:

4

Well, here's a kludgy fix. The button could simply toggle the position of a hidden timeline. Based on the position of the timeline, a value could be assigned.

If 1 second... red
If 2 seconds... green
If 3 seconds... blue

That shouldn't have errors and it would help keep the code contained to a single JavaScript file.

5

Are you not losing the element it self then?

If you wanted to manipulate the element you clicked you would need to use

var elm = getElementById('lostElement');

Just to clarify if others use this example.

6

Global variables are neat and all, but I’m not entirely sure how they would help with my example?

7

You can call functions from other functions, yes. Thanks for the example.

The post however was about setting parameters from the inspector.

8

Sure, that would work too, but then don’t you still need a function for each button so that each button goes to a different part of the timeline?

9

It could be done without manual coding. Using Hype actions, an element can determine the specific time location of a timeline.

10

Ah I see, thanks for clarifying!

I hadn’t thought about that because my real task is a bit more complex, that needs to actually be done in JavaScript.

Still, it’s worth keeping in mind for simpler tasks!