Trigger change event after changing input value using javascript

Dash Python
1

I’m trying to update an input with javascript, and something seems to be blocking the action or otherwise not allowing me to do what I’m intending to do.

This site is not my own, but an example of a site with inputs: https://dash-gallery.plotly.host/dash-pk-calc/. Change the first input to 3 and you’ll see the table change.

In the console (in Chrome), I’m trying to edit the values and make the table update:

var el = document.getElementById('times-input');
el.value=4;
el.dispatchEvent(new Event('change'));

The value itself updates to 4, but the table doesn’t change. If you then click in the body of the window, the value resets to 3.

Is there something obvious that I’m missing on how to cause the charts to update with this simple javascript, or is it a more complicated issue within dash?

Thanks!

3 Likes
2

Had the same problem.

You can use:

var el = document.getElementById('times-input');
el.defaultValue=4;
el.dispatchEvent(new Event("input", { bubbles: true }));