# Detect changes to an input with changes via JS

**URL:** <https://community.plotly.com/t/detect-changes-to-an-input-with-changes-via-js/82881>\
**Category:** Dash Python\
**Created:** [March 8, 2024, 12:39pm UTC](https://community.plotly.com/t/detect-changes-to-an-input-with-changes-via-js/82881 "2024-03-08T12:39:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JackWtr](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@JackWtr](https://community.plotly.com/u/JackWtr)\
**Post date:** [March 8, 2024, 12:39pm UTC](https://community.plotly.com/t/detect-changes-to-an-input-with-changes-via-js/82881/1 "2024-03-08T12:39:59Z")

</div>

Hi guys, I have a button created by js that is inside an agGrid cell and I have control over when this button is selected or not, this is the code in question

```auto
var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.launchBtn = function (props) {
    const onClick = (e) => {
        e.preventDefault();
    
        const currentButton = e.currentTarget;
        const isAlreadyClicked = currentButton.classList.contains('clicked');
        let detail = {value: props.value, clicked: !isAlreadyClicked};
    
        if (isAlreadyClicked) {
            currentButton.classList.remove('clicked');
        } else {
            document.querySelectorAll('.button-table.clicked').forEach(button => {
                button.classList.remove('clicked');
            });
            currentButton.classList.add('clicked');
        }
        
        // Disparar evento personalizado com o novo estado do botão
        window.dispatchEvent(new CustomEvent('buttonStateChange', { detail: detail }));

        // Selecionar o elemento input invisível e atualizar seu valor
        document.getElementById('invisible-input').value = JSON.stringify(detail);

        // Disparar um evento de mudança manualmente para que o Dash possa detectá-lo
        document.getElementById('invisible-input').dispatchEvent(new Event('change', { bubbles: true }));

    };

    return React.createElement('a', {
        target: '_blank',
        href: '#',
        className: 'button-table',
        onClick: onClick,
    }, 'Ver pontos');
};

```

I’ll leave an image below and I’ll comment more with codes later on.

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/2/d282050a0af2c680be1fd5357b9a610e4758d104.png)

Note the input text changes correctly after the click but the text below doesn’t change at all, I even tried using an interval to make this work but it didn’t work:

```auto
    @dash_app.callback(
        Output('output-button-state', 'children'),
        [Input('invisible-input', 'value'),
        Input('interval-component', 'n_intervals')]
    )
    def update_output(value, n):
        print(value)
        if value:
            state = json.loads(value)
            clicked = state.get('clicked', False)
            return f"Botão clicado: {clicked}"
        return "Nenhum dado recebido."

```

How can I get the state of this button or get the value within the input so that it always detects the change coming from JS??

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 8, 2024, 1:39pm UTC](https://community.plotly.com/t/detect-changes-to-an-input-with-changes-via-js/82881/2 "2024-03-08T13:39:40Z")

</div>

Hello @JackWtr,

This is an issue with things existing the DOM vs existing in the React, typically you cannot directly interact with each other.

However, in `2.16.0` a new clientside function was created, this allows direct interaction from JS functions to set props on a dash component.

This new function is called, `dash_clienstide.set_props`.

To use it, you can do this:

```auto
dash_clientside.set_props(id, {propsToSet})

```

So, for this example, you’d do this:

```auto
dash_clientside.set_props(‘invisible-input’, {value: newValue})

```

Where newValue is the new value you want to set.