Cascading dropdown JS

[Buggy]

i have this code and want it to set radioButtonActive.checked  = 'checked'; only when page changes not when its initially created but i think because it relates to the value of a cascading dropdown its is set top active everytime apart from if is true. how could i achieve this ?

 

<script>
if (document.DataPageReadyHandler == undefined) {

     const DataPageReadyHandler = (e) => {
          if (e.detail.appKey != '[@cbAppKey]') { return }
    
         const dropdown = document.querySelector('select[id*="EditRecordMW_Watch_Work_Work_Progress"]');
         const radioButtonComplete = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Complete"]');
         const radioButtonActive = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Active"]');
     
         dropdown.addEventListener('change', (e) => {
            if (e.target.value == '2'|| e.target.value == '12' || e.target.value == '21' || e.target.value == '113' || e.target.value == '116') {
                radioButtonComplete.checked  = 'checked';
            } else {
                radioButtonActive.checked  = 'checked';
            }
         })
    }
    document.addEventListener('DataPageReady', DataPageReadyHandler)
    document.DataPageReadyHandler = 'Enabled'
}
</script>

[Kronos]

Hi @Buggy,

I'm quite confused about the intended workflow. So if a DataPage loads, the JS will not select a radio button option. It will only select a radio button option when a Cascading dropdown has a selected option. Is that right?

[Buggy]

yes so when page loads the dropdown is selected and radiobutton is selected from value set previosly in the database but the js is setting radiobutton to "active" regardless. i only want it to do that if the value of the dropdown is changed by the user.