I'm writing a chrome extension where I need to simulate user clicks on a webpage before pasting information into fields. The page has a listbox with onchange javascript (not mine) attached to it. Depending on the selection of the listbox the page shows different kind of information. So basically I want to execute a series of dispatchEvents.

The issue I have is that I need to wait until the onchange javascript on the listbox is done with it's thing before moving on to the next dispatchEvent in order to refer to new elements created by the onchange javascript. How do I do that?

If I just do one call like this:

elmt = document.getElementById('freightServiceSelect');
elmt.selectedIndex = 24;
elmt.dispatchEvent(new Event("change"));

it works fine. But if I then add the next call immediately after, like this:

elmt = document.getElementsByName("freightServiceAddon")[0];
elmt.checked = true;
elmt.dispatchEvent(new Event("click"));

it gets executed immediately and the element "freightServiceAddon" is at that point undefined.