How do I find the id of the button clicked?

Ask the community
,
1

I have a set of buttons as shown below on a page and I would like to find the id of the button that was clicked by the user. Basically, I want the button label eg.2020, 2019 etc., depending on which one was clicked, to appear on the “YEAR” text box on the top left corner.

863×157 20.4 KB

Can someone help with a suggestion please?

2

You said textbox, so I’m assuming it’s an input box with a value property. With a text element, you would be assigning the text property.

There are other ways to do this. You could use a repeater or selection tags instead of all of those buttons. The advantage would be that the code would be in one function instead of 18 separate functions.

export function button2020_click(event) {
      $w("#textBox").value = event.target.label;
}
3

Thank you, anthonyb
Would you please guide me how to use a repeater so I could use a single function instead of 18 separate functions. I am very new to WIX and any help would tremendously benefit me.

4

@inayat_jilani Given that you are new to Wix (and probably coding as well), there would be a lot of back and forth involved in getting you to a place where this was functional with a repeater or selection tags.

5

@tony-brunsman Thank you for you quick response. I have done quite a bit of coding over the years. Can I go over the basics of repeater object and try some simple coding changes and then get back with you? Hopefully this cuts down the level of help I would need.

6

@inayat_jilani There is a trick to getting a repeater to repeat horizontally rather than vertically. You’ll probably figure it out.

7

@tony-brunsman I will give it a try and get back with you. Thanks very much!

8

@tony-brunsman I followed some examples for working with repeaters. I created a function as below:

export function makeRepeater() {
$w( “#repeater1” ).forEachItem ( ($item,itemData, index) => {
$item( “#button2025” ).onClick ( (event) => {
//console.log("You clicked "+ itemData.Title);
console.log( "You clicked " + $item.id);
});
});
}

I am calling the above function from dataset1_ready() function. I get “You clicked undefined” in the console log. I think I might missing some kind of config link between the repeater and the dataset. Looks like both the parameters $item and itemData are not being recognized.
Any hints to look into?
Thanks and regards

9

@inayat_jilani Maybe someone has learned to “tame” repeaters horizontally, but unless you have “stretch” on, then it will go vertically. I’ve used repeaters in page headers and they displayed horizontally as I wanted them to on desktop view.

That’s why I mentioned the selection tag element as being a possibility. You can get it displaying similar to the multi-button configuration you showed in your original post. Here is some code you can work from:

$w.onReady(function () {
    LoadSelTags();
});

export function LoadSelTags() {
 let stData = [], repItem = {}, yearstring = "";
 for (var year = 2003; year <= 2020; year++) {
     yearstring = year.toString()
        repItem = {"value": yearstring,"label": yearstring};
        stData.push(repItem);
    }
    $w("#selectionTags1").options = stData;
}

export function selectionTags1_change(event) {
    console.log(event);
    console.log("You clicked "+ event.target.value[0]);
    // clearing the selection so the next click still grabs
    // the one and only item in the event.target.value array
    $w("#selectionTags1").selectedIndices = [];
}
10

@tony-brunsman Thanks for your suggestion to use Selection Tags. I would love to try them out once I can fix the issue I am having with the earlier approach using a repeater with buttons.
Any idea what I might be missing that is causing the console log output to show undefined and not the button label text (the line commented out in the code I posted above)?
Since I am learning Wix, it would be nice if I can understand my mistake with the previous approach and then try a different one.
Please let me know. Thanks

11

I reverted the web site to the version where the repeater code was working but not displaying like what you had, but rather stretched both ways horizontally. Here’s that code:

$w.onReady(function () {
    makeRepeater();
});

export function makeRepeater() {
 let repData = [], repItem = {};
 for (var year = 2003; year <= 2020; year++) {
        repItem = {"_id": year.toString()};
        repData.push(repItem);
    }
    $w("#repeater1").data = repData;
    $w("#repeater1").forEachItem (($item,itemData, index) => {
        $item("#button2025").label = itemData._id;
    });
}

export function button2025_click(event) {
 let $item = $w.at(event.context);
    console.log("You clicked "+ $item("#button2025").label);
}
12

anthonyb: The above code worked like a charm. Just copy pasted and it worked absolutely fine! Thank you very much!
Good night!