# Some way to figure out what element was clicked from the clickHandler?

**URL:** <https://forums.fusetools.com/t/some-way-to-figure-out-what-element-was-clicked-from-the-clickhandler/4866>\
**Category:** Feature Suggestions\
**Created:** [November 3, 2015, 7:42am UTC](https://forums.fusetools.com/t/some-way-to-figure-out-what-element-was-clicked-from-the-clickhandler/4866 "2015-11-03T07:42:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [November 3, 2015, 7:42am UTC](https://forums.fusetools.com/t/some-way-to-figure-out-what-element-was-clicked-from-the-clickhandler/4866/1 "2015-11-03T07:42:03Z")

</div>

Hi!

As I have mentioned in a previous post, I’m creating an application for voting, and I’ve run into some problems:

I have elements representing score from 1 through 5. But Right now it seems I need 5 clickhandlers - one for each element. So this leaves me with 5 functions doing pretty much the same. In HTML there’s functionality for adding custom data using the data-attribute, could it be possible to do the same here and have them as a part of the parameters in the clickhandler?

To me this would look something like this:

```auto
<JavaScript>
function voteHandler(args) {
    console.log(args.data.score);
}

module.exports = {
    voteHandler: voteHandler
}
</JavaScript>
<StackPanel>
    <Panel data-score="5" Click="{voteHandler}">
        <Text Value="Vote 5!" />
    </Panel>
    <Panel data-score="4" Click="{voteHandler}">
        <Text Value="Vote 4!" />
    </Panel>
    <Panel data-score="3" Click="{voteHandler}">
        <Text Value="Vote 3!" />
    </Panel>
    <Panel data-score="2" Click="{voteHandler}">
        <Text Value="Vote 2!" />
    </Panel>
    <Panel data-score="2" Click="{voteHandler}">
        <Text Value="Vote 2!" />
    </Panel>
    <Panel data-score="1" Click="{voteHandler}">
        <Text Value="Vote 1!" />
    </Panel>
</StackPanel>

```

Really open for other ways to solve it, but to me this feels a lot better than having multiple event-handlers for basicly the same thing.

Also, is there possible for the UI to know if a callback returns true or false? Let’s consider the function from above that would do an ajax-call to a backend storing the vote. If the vote is saved, it returns true, anything else it returns false. Let’s say I’d like the vote-button become red if it fails, and green if it’s successful. How would I go ahead and do this?  
As the elements people would use to vote is generated dynamicly, I guess an observable would make the whole UI react the same, as I would need each element to react separatly.

Regards JoMs

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [November 3, 2015, 9:04am UTC](https://forums.fusetools.com/t/some-way-to-figure-out-what-element-was-clicked-from-the-clickhandler/4866/2 "2015-11-03T09:04:35Z")

</div>

This is how I would solve that:

```auto
<App Theme="Basic">
    <JavaScript>

    var votelist = [
        {'data_score': 5, 'text': 'Vote 5!'},
        {'data_score': 4, 'text': 'Vote 4!'},
        {'data_score': 3, 'text': 'Vote 3!'},
        {'data_score': 2, 'text': 'Vote 2!'},
        {'data_score': 1, 'text': 'Vote 1!'}
    ];

    function voteHandler(args) {
      console.log(args.data.data_score);
    }

    module.exports = {
      voteHandler: voteHandler,
      votelist: votelist
    }
    </JavaScript>
    <StackPanel>
        <Each Items="{votelist}">
            <Panel>
                <Clicked><Callback Handler="{voteHandler}" /></Clicked>
              <Text Value="{text}" />
            </Panel>
        </Each>
    </StackPanel>
</App>

```

It doesn’t look like Fuse supports two-way databinding on colors yet, so I don’t know how you would do that from JavaScript, without making custom Uno elements.

---

<div class="post-metadata">

**Author:** ![mthomson](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mthomson/32/174_2.png) [@mthomson](https://forums.fusetools.com/u/mthomson)\
**Post date:** [September 16, 2016, 1:54am UTC](https://forums.fusetools.com/t/some-way-to-figure-out-what-element-was-clicked-from-the-clickhandler/4866/3 "2016-09-16T01:54:51Z")

</div>

How would you do this if the javascript is in a seperate .js file? I’m trying to do something similar, and I’ve made it the same as your solution, but the javascript is in a seperate file, and I keep getting args undefined.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [September 16, 2016, 7:34am UTC](https://forums.fusetools.com/t/some-way-to-figure-out-what-element-was-clicked-from-the-clickhandler/4866/4 "2016-09-16T07:34:24Z")

</div>

You would do it in exactly the same way. If you take Bolav’s above example, move the JS out in a separate file and then use `<JavaScript File="myNewScriptFile.js"/>` then everything else works just as before.

I suspect your issue is elsewhere. If you can share the relevant bit of code we can probably work it out. 🙂