Value of texbox input is filled but returns empty/undefined

Question

I am new to javascript/typescript and I am trying to create a floating label for my text input widget. If the textbox contains a value I want to add a CSS 'active' class in order to add some styling to my textbox.

Below is part of my code for checking if the textbox contains a value. I do not understand why it fails.

//Structure texbox input widget
<div class="mx-textbox">
  <label class="control-label"> </label>
  <input class="form-control" value="Best"> 
</div>

//Part of my code for adding an 'active' class to my textbox div
init = () => {
        const floatContainers = document.querySelectorAll('.mx-textbox');
            
        floatContainers.forEach((element: HTMLInputElement) => {
            element.classList.add('floatLabel');
            const inputElement = element.querySelector('input');
            if (inputElement) {
                console.log(inputElement);
                console.log("value for " + inputElement.id + " is " + inputElement.value);
                if (inputElement.value) {
                    element.classList.add('active');
                }
              }  

            this.bindEvents(element);
        });
    }; 

When I check my console I can see the value's are found for my texboxes but if I try to check the value it seems to be empty? Console where you can see that my input items have a value

Can somebody explain me what to do or how to check it properly?