# I want to capture the onClick event and get the id value of a row

**URL:** <https://forum.builder.io/t/i-want-to-capture-the-onclick-event-and-get-the-id-value-of-a-row/6238>\
**Category:** Technical Questions\
**Created:** [August 24, 2024, 3:19am UTC](https://forum.builder.io/t/i-want-to-capture-the-onclick-event-and-get-the-id-value-of-a-row/6238 "2024-08-24T03:19:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kenz](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@Kenz](https://forum.builder.io/u/Kenz)\
**Post date:** [August 24, 2024, 3:19am UTC](https://forum.builder.io/t/i-want-to-capture-the-onclick-event-and-get-the-id-value-of-a-row/6238/1 "2024-08-24T03:19:13Z")

</div>

_I want to capture the onClick event and get the id value of a row_

**Builder content link**  
_[Builder.io: Visual Development Platform](https://builder.io/content/7c8d1d1ce45d4897a699b1a6b93ab527/edit?activeDesignerTab=3&selectedBlock=builder-505b80d6efb748a8b9c8641ed72456c1)_

**Builder public api key**  
_8102a91244d54f29aa0462cc10eafd1e_

**What are you trying to accomplish**  
_I want to capture the onClick event and get the id value of a row, then use that id to show or hide a box displaying detailed information about the product._

**Screenshots or video link**

 ![1](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/31ea325fe86fba92f4c035163242cff0a3955707.png)  
 ![2](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/64ee286247bd672256c352d27a1380f8f10f4d88.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/13cb30771c2e0be5bd134bc1b98c46ba7d11c636.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 26, 2024, 11:07am UTC](https://forum.builder.io/t/i-want-to-capture-the-onclick-event-and-get-the-id-value-of-a-row/6238/2 "2024-08-26T11:07:28Z")

</div>

Hello @Kenz,

You can capture the id value of row using the builder state and action

Action handlers introduce an additional object you can access: `event`.

This `event` object represents the HTML event triggered by the selected action. You can leverage `event` to access the event’s target element or invoke methods such as `preventDefault` or `stopPropagation`:

```auto
// access the value attribute (ie from an input)
// and store it in builder state
state.someStateProp = event.currentTarget.value;

// if you have a link with an href, you might want to stop
// default browser navigation and handle this yourself
event.preventDefault();
var targetElementId = event.currentTarget.id;
var elementToHide = document.getElementById(targetElementId);
elementToHide.style.display = 'none';

```

For reference, please refer to the below links

> **[Building Interactivity Using State and Actions - Builder.io](https://www.builder.io/c/docs/guides/state-and-actions)**
>
> Making interactive content in Builder.io with state and actions. Watch the 5-minute video walkthrough and get started.

> **[Custom Code in the Visual Editor - Builder.io](https://www.builder.io/c/docs/guides/custom-code#action-handlers-using-the-event-object)**
>
> Add custom JavaScript and CSS to your Builder content. Learn how to access browser events, state properties, and add custom CSS to your pages.