Is there a way to execute a block of code after Click() is simulated in javascript?

What am I trying to do?

  • There is an e-commerce site that obfuscates/hides the buyer information (on seller side of the platform) until you click on the switch to toggle a SWITCH-ON state.
  • I am simulating a click() on a switch with javascript to display hidden information
  • information (I assume) is pulled from a backend server
  • I need to store the information after the contents are displayed through the switch-on toggle

What have I done?

  • Simulated a click event on the switch with
document.getElementsByClassName("next-switch-children")[0].click();
  • Information is displayed as if I were to toggle the switch manually. It’s a success.
  • I can see the values, but I face a problem when trying to store it.
  • The stored values are hidden values from before the click() event is simulated. (I want to store values that the server gives back after the click event has happened)
  • So, when I am expecting to get the value Shamona(example), I am instead getting S*a stored in receiver.

My code:

// I have this click event

    document.getElementsByClassName("next-switch-children")[0].click();

// And I can't figure out how to execute the following block of code 
// after click is simulated and data is pulled from backend.

    const receiverField = document.getElementsByClassName("order-field-shipping-receiver-name")[0];
    const receiverName = receiverField.getElementsByClassName("order-field-value")[0];
    receiver = receiverName.getElementsByClassName("show-text")[0].textContent;
    console.log(receiver)

How it looks:

  • The value is hidden like this at SWITCH-OFF
    The Switch off state hides values
  • The value is displayed when the switch is toggled to SWITCH-ON
    The Switch on state displays values from server
  • The console.log(receiver) outputs
S*a
  • I am getting S*a instead of Shamona(example) because the code below gets executed right after the click() event happens but before the hidden values can be populated with the ones from the server.

How do I remedy this?

If I could listen to an attribute change event like div class= next-switch-off turning to next-switch-on , would that work?

What would be the best way to solve this. Open to any suggestions.