I need to create 88 separate buttons, each triggering essentially the same function with a different value. It seems strange that the process for creating each means manually "adding" a new function, the typing in the name (no paste option) then pasting in the code and editing the variable. This is the only means to do it since there's no way to duplicate a function. And if I write them as individual .js files and import them, they aren't available to trigger with a button.
Just seems like I am missing something obvious??
FYI this is the basic function I am using.
{$(this).pinDefine("S0").updateValue('15On').sendValue();}
I wonder if I can use the same function for all 88 buttons, but associate the pin "value" of each button's "instance" (if that makes sense)... perhaps I can pass the buttons ID or something. Thoughts?
of course you can assign different values to different elements using one function.
the thing to do is specifying the value and make it accessible by the function.
one option: set a data-attribute to each element which holds the value.
so on your trigger get the attribute and assign it via your scriptline
What @h_classen is saying in your button handler use something like:
var value1=element.getAttribute("data-value1");
With value1 being an attribute you define on the button under additional attributes. As you can see... you can use more values if needed.
update: As I just realized… I was assuming that it is clear that this approach would only need a single handler function. Allowing for the simplification from 88 to 1 function, the differentiation being in the attribute.
It is definitely preferable to use a single function than 88 different functions! This will reduce the code footprint and also make edits easier.
So I'd recommend making a single button first, add the function on an action handler, and then you can copy/paste it all those times so you don't need to keep setting the function.
For the function, note that the element is an argument passed into the function definition:
// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function untitledFunction(hypeDocument, element, event) {
}
Therefore you can use element.id or the above mentioned element.getAttribute().
While I think using getAttribute() with the Additional HTML Attributes in the Identity Inspector is the "cleanest" way to do this, you would need to manually make 88 changes. Instead, if you select 88 elements and add a Unique Element ID, there's a feature in Hype that will add numbering to each ID automatically so they stay unique. This way you only need to do it once.
Of course I assume the 88 buttons will still be different in some other way, so it might not be much additional work to go the HTML Attribute route. IDs of course should be unique for the whole document, so there are times when it might be inappropriate to use.
