Add input text when option selected - OTRS

Im trying to populate subject with specific text if i choose a specific option from this list

Print of frontend

Subject html part:

<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate  Validate_Required" aria-required="true">

Options list part:

The code that already try to make, but dont work:

 $(document).ready(function() {   
   setTimeout(function() {
     const Action = Core.Config.Get("Action");
     const SupportedActions = ["AgentTicketNote"];
     if ($.inArray(Action, SupportedActions) !== -1) {
       if (Action === "AgentTicketNote") {      
        var dyno = document.getElementById("DynamicField_QueueNote_Search");
        dyno.addEventListener("change", changeByOption(dyno.value), false);
       }
     }
     function changeByOption(option) {
       var sub = document.getElementById("Subject");
          if (option === '- Move -') sub.value = '';      
          else if (option === 'Field_Support') sub.value = 'Nota para field';     
          else if (option === 'Helpdesk') sub.value = 'Nota para helpdesk';       
          else if (option === 'Sistemas_Windows') sub.value = 'Nota para sistemas';
     }  
   })
 });

HTML code part:

                        <div class="Row Row_DynamicField_QueueNote">
                        <label id="LabelDynamicField_QueueNote" for="DynamicField_QueueNote">
To queue:
</label>

                            <div class="Field">
                            <select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
  <option value="">-</option>
  <option value="- Move -" selected="selected">- Move -</option>
  <option value="Field_Support">Field_Support</option>
  <option value="Helpdesk">Helpdesk</option>
  <option value="Sistemas_Windows">Sistemas_Windows</option>
</select>

Input Field code:

<div class="InputField_Selection" style="left: 5px; display: block;"><div class="Text">Helpdesk</div><div class="Remove"><a href="#" title="Remove selection" role="button" tabindex="-1" aria-label="Remove selection: Helpdesk">x</a></div></div>

You don't need to wait for the DOM to load if you add the JavaScript the proper way. An alternative is this add-on, which also loads the JavaScript after the DOM is fully loaded.

const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];

if ($.inArray(Action, SupportedActions) !== -1) {
    if (Action === "AgentTicketNote") {
        $('#DynamicField_QueueNote').on('change', function() {
            const Option = $(this).val();

            if (Option === '- Move -') $('#Subject').val('');
            else if (Option === 'Field_Support') $('#Subject').val('Nota para field');
            else if (Option === 'Helpdesk') $('#Subject').val('Nota para helpdesk');   
            else if (Option === 'Sistemas_Windows') $('#Subject').val('Nota para sistemas');
        });
    }
}