# How to passing parameter on click event?

**URL:** <https://forums.fusetools.com/t/how-to-passing-parameter-on-click-event/6125>\
**Category:** How-to Discussions\
**Created:** [July 17, 2016, 12:41pm UTC](https://forums.fusetools.com/t/how-to-passing-parameter-on-click-event/6125 "2016-07-17T12:41:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![304396985](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/304396985/32/546_2.png) [@304396985](https://forums.fusetools.com/u/304396985)\
**Post date:** [July 17, 2016, 12:41pm UTC](https://forums.fusetools.com/t/how-to-passing-parameter-on-click-event/6125/1 "2016-07-17T12:41:30Z")

</div>

Say I have 3x3 number pad represented by 9 buttons from 1 to 9, so how can I bind them to the same `btnClicked` function and then tells which button did the user pressed?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [July 19, 2016, 7:47am UTC](https://forums.fusetools.com/t/how-to-passing-parameter-on-click-event/6125/2 "2016-07-19T07:47:04Z")

</div>

Hey there, a quick answer to your question would be “you don’t pass params on click event”. Fuse is so awesome that it handles this for you and passes the data context to the callback function when you use a `Clicked` trigger.

Having said that, one should note that this mostly is useful when your data context is being set by either an `Each` iterator in UX, or by a `Select` control, otherwise the context becomes the whole page you’re on.

I see at least two ways how to solve your exercise.

Approach one: use a JS data source to generate the clickable items, and receive the whole clicked object in callback function. Code:

```auto
<App>
    <JavaScript>
    var numpad = [
        {'num':1,'fill':'#faa'},
        {'num':2,'fill':'#aaf'},
        {'num':3,'fill':'#afa'},
        {'num':4,'fill':'#faf'},
        {'num':5,'fill':'#ffa'},
        {'num':6,'fill':'#aff'},
        {'num':7,'fill':'#abc'},
        {'num':8,'fill':'#cba'},
        {'num':9,'fill':'#bac'}
    ];

    function numClicked(args) {
        console.log('registered a click on item with num=' + args.data.num + ' and fill=' + args.data.fill);
    };

    module.exports = {
        'numpad': numpad,
        'numClicked': numClicked
    };
    </JavaScript>
    <WrapPanel Width="300" Height="300" Alignment="Center">
        <Each Items="{numpad}">
            <Panel Width="100" Height="100" Background="{fill}" HitTestMode="LocalBoundsAndChildren">
                <Text Alignment="Center" Value="{num}" />
                <Clicked>
                    <Callback Handler="{numClicked}" />
                </Clicked>
            </Panel>
        </Each>
    </WrapPanel>
</App>

```

Approach two: make the UX static (instead of generating it as in example one), assign distinct `ux:Name`s to all clickable elements, and catch the sender in callback function. It’s important to note that `sender` in the callback function arguments is only available when the clicked element was assigned a `ux:Name`.

```auto
<App>
    <JavaScript>
    function numClicked(args) {
        console.log('registered a click on item with num=' + args.sender);
    };

    module.exports = {
        'numClicked': numClicked
    };
    </JavaScript>

    <Panel ux:Class="NumItem" Width="90" Height="90" Margin="3" Background="#faa" HitTestMode="LocalBoundsAndChildren">
        <string ux:Property="Label" />
        <Text Alignment="Center" Value="{Property this.Label}" />
        <Clicked>
            <Callback Handler="{numClicked}" />
        </Clicked>
    </Panel>

    <WrapPanel Width="300" Height="300" Alignment="Center">
        <NumItem ux:Name="num1" Label="1" />
        <NumItem ux:Name="num2" Label="2" />
        <NumItem ux:Name="num3" Label="3" />
        <NumItem ux:Name="num4" Label="4" />
        <NumItem ux:Name="num5" Label="5" />
        <NumItem ux:Name="num6" Label="6" />
        <NumItem ux:Name="num7" Label="7" />
        <NumItem ux:Name="num8" Label="8" />
        <NumItem ux:Name="num9" Label="9" />
    </WrapPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![304396985](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/304396985/32/546_2.png) [@304396985](https://forums.fusetools.com/u/304396985)\
**Post date:** [July 19, 2016, 8:13am UTC](https://forums.fusetools.com/t/how-to-passing-parameter-on-click-event/6125/3 "2016-07-19T08:13:53Z")

</div>

Thanks so much for detailed solution. Learned a few tricks from you. thanks again.