[Solved] Passing arguments to callback functions

Ask the community
,
1

Hi All.

I am just getting started with Velo, and am having trouble porting my custom element JS to my Wix site. In short, I have several text input elements with IDs #iText1, #iText2 etc on my page, and I need to determine which one input received input within my event handler:

$w.onReady(function () {
  $w("TextInput").onInput(textInput());
});

As far as I can ascertain, its not possible to pass an argument to the callback function, ie the following does not work:

$w.onReady(function () {
  $w("#iText1").onInput(textInput(1));
  $w("#iText2").onInput(textInput(2));
});

In standard HTML this is quite easy, but I cannot figure out how to do it with Velo / Wix. Can someone please explain how to go about this, or point me at code that demonstrates what I need to do?

2

They may be some alternative way to archive that.
May i know what exactly yow want to archive in real world example(Case)

3

What is it you are trying to accomplish?

Each event handler receives an Event object as in input parameter. This includes all the information you need regarding the triggered event.

4

In short, I have four custom elements, and four separate text inputs - one per custom element. When the user types text into one of the text inputs (lets say #iText3), I need to be able to respond to that, and then update all four custom elements, starting with the one that received the newest input, which in this case would be #customElement4. This would be followed by updates of custom elements 4, 1, and finally 2.

What I am trying to do is to write a single event handler in which I am able to differentiate which of the four text inputs triggered the event, so I can then run the custom element updates in the right order, using a single event handler.

All the official Velo examples I have seen to date make use of the same event handler formulation - for example:

$w.onReady(function () {
  $w("#iText3").onKeyPress(textInput3Function);
});

function textInput3Function() {
  // Do something useful here.
}

When you say that each event handler receives an event handler as an input parameter, exactly how does one access the information it contains? Do you mean something as simple as:

function textInput3Function() {
  let text = $w("iText3").value;
}

If so then I have been way overthinking this. Even if this is the true, this approach still requires a separate event handler per text input, which becomes an issue as the number of custom elements and text inputs on the page grows (up to 32 in my case). Hence what I would ideally like is to be able to have an event handler formulation such as:

$w.onReady(function () {
  $w("TextInput").onKeyPress(textInputFunction);
});

function textInputFunction() {
  // Start by determining which text input triggered the event.
}
5

A quick example…

Here is an onInput() event handler that I connected to a bunch of different input fields:

export function input_input(event) {
   console.log('event', event);
}

The resulting console output:

As you can see, check target property to find which element triggered the event.

6

Fantastic - thank you very much.