I have a very basic Symfony-Form where you can chooce between 2 different options. When Option 1 is selected, i want to set the Color of my colorinput to Color X. When i choose Option 2 then i want to show Color Y.

My Problem: Its not working when i use the ColorInputField from the Symfony FormbuilderInterface. When i use basic Html Code (So when i use a very normal ColorInputField) it works perfectly.. Where is my misconception? Here is my code:

My Basic Form(TWIG)

 {{ form_widget(kategorieForm.revenue) }} <-- ChoiceType::class with the ID="ChoiceField"
 {{ form_widget(kategorieForm.color) }} <-- ColorType::class with the ID="ColorField"

is rendered as

<select id="ChoiceField" name="kategorie[revenue]" class="form-control"><option value="0" selected="selected">Ausgabe</option><option value="1">Einnahme</option></select>

    <input type="color" id="ColorField" name="kategorie[color]" class="testcolorpicker form-control" />

My ColorInput which works perfectly

<input type="color" id="ColorFieldWhichWorks" name="workingcolorinput">

My Javascript

let ColorFieldWhichWorks = document.getElementById("ColorFieldWhichWorks")
let ChoiceField = document.getElementById("ChoiceFiel")
let ColorField = document.getElementById("ColorField")

 ChoiceField.addEventListener("change", () => {
  // if value switched by client
    switch (ChoiceField.value) {
      case "0":
    ColorField.value = "#873e23" ;
    ColorFieldWhichWorks.value = "#873e23"
        break; 
      case "1":
  ColorField.value = "#2596be" ;
  ColorFieldWhichWorks.value = "#2596be" ;
        break;
    }
  });

I really dont understand why i cant change the ColorField from the Symfony Form. At the end its like my ColorFieldWhichWorks just basic html code or am I wrong?