Change the color of a button, if at least one option of a form is selected

I have a form with three options, by default the button is disabled in gray, I want that if the user just chooses an option, this button changes to blue.

<div id="openModal" class="modalDialog" data-modalorder="1">
<div>
<a href="#close" title="Close" class="close">X</a>
<h1 style="text-align: center; font-weight: 600">Gender</h1>
<form id="form_gender">
    <div class="hungry">
        <div class="selection">
            <input id="man" value="Man" name="gender" type="radio" /> 
            <label for="man">Man</label>
        </div>
        <div class="selection">
            <input id="woman" value="Woman" name="gender" type="radio" />
            <label for="woman">Woman</label>
        </div>
        <div class="selection">
            <input id="other" value="Other" name="gender" type="radio" />
            <label for="other">Other</label>
        </div>
    </div>
    <input id="btn_genero" class="getAssignment" type="button" onclick="btnGenero()" value="Siguiente">   
    </form>
</div>

I have the following function to add the new class with the new color, but it doesn’t work correctly. When I select an option the color does not change to blue

<script>
const btnGenero = () =>{
            
            try{
              const value = document.querySelector('input[name="gender"]:checked').value;
              var element = document.getElementById("btn_genero");
              if(value != ''){
                element.classList.remove("getAssignment");
                element.classList.add("getAssignment2");
                alert('success')
              }else{
                alert('required')
              }
            }catch(err){
              alert('required')
            }
            
          }
</script>

And this is my css code

<style>
.getAssignment {
cursor: pointer;
background: gray;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
width: 259px;
height: 34px;
}
.getAssignment2 {
cursor: pointer;
background: red;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
width: 259px;
height: 34px;
}