Can I Use One Export Function For A Set of Buttons?

Ask the community
,
1

I have several buttons that perform similar tasks. Here’s a live example:

export function index001_mouseIn(event) {inDEXTmp = "001"; indexInit();}
export function index002_mouseIn(event) {inDEXTmp = "002"; indexInit();}
export function index003_mouseIn(event) {inDEXTmp = "003"; indexInit();}
export function index004_mouseIn(event) {inDEXTmp = "004"; indexInit();}
export function index005_mouseIn(event) {inDEXTmp = "005"; indexInit();}

I have many more buttons in this set. Is there a way to have all buttons in this set use the same export function or some variation of it? I want to “shrink” my code.

Thank you so much for your help.

2

You can do something like:

$w.onReady(() => {
$w('#element1, #e2, #e3, #e4').onMouseIn(event => {
//common code to run
})
})
3

Really!?!

That’s beautiful. I’m still fairly new to coding Velo. I need a use case to explore. I’m on a big project with lots of buttons. There’s my use.

Wow! This is going to save me serious lines.

Thank so much.

4

Yes,
And you can also do in your case:

$w.onReady(() => {
$w('#index001, #index002, #index003').onMouseIn(event => {
const targetId = event.target.id; //the element id e.g. "index001"
const inDEXTmp= targetId.split('index')[1];//"001" OR "002" etc..
indexInit();
})
})