HTML/JS toggle-button events and functions

Hi, I’m currently working on creating a toolbar window. So far it’s working
quite well, but HTML/CSS/JS are definitely not my best skills, so please
excuse if I’m missing something obvious :slight_smile: In my HTML I have this toggle
button defined:

  1. It draws the toggle nicely and the onclick event also triggers. However, it
    looks like the onclick event gets triggered before the toggled value
    actually changes. For example when turning the switch ON, this return
    false. A short moment later the same function return true.

     document.getElementById("liveMonitorToggle").toggled
    

Of cause I could just invert the result, but that’s not really nice. Are there
any other events I could use? I couldn’t find any. 2) How can I
programmatically change the value of the toggle-button? I couldn’t find any
variable/function to do that. Thanks :slight_smile: Best regards Axel

You should be able to get the toggled state within your event callback but
it’s better to set a reference to the element first.

const liveMonitorToggle = document.getElementById("liveMonitorToggle");

toggleLiveMonitor(){
  return liveMonitorToggle.toggled;
}

Or since the toggleButton has getValue() and setValue() methods, use those.

toggleLiveMonitor(){
  return liveMonitorToggle.getValue();
}

The class definition is in MicrosoftFlightSimulator\Packages\fs-base-
ui\html_ui\Templates\ToggleButton.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.