Having difficulty with selecting javascript input radios

I have a website that is asking the user to select either a male or a female option via radio inputs. I am having difficulty outputting a message to the console for when I have either a male selected or a female selected. I'm not sure why my javascript is not outputting the relevant console.log message. Any help would be much appreciated. Relevant code below

    var height, weight, measurementUnit;

    //If male is selected 
    if (document.getElementById('gender_male').checked) {
        console.log('male selected');
    }
    // if female is selected 
    else if (document.getElementById('gender_female').checked) {
        console.log('female selected');
    }
    // if no gender is selected output and error
    else {
        console.log('no gender selected');
    }

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="resources/css/styles.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
        <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
        <title>BMI calculator</title>
    </head>


    <body>
        <h1>Body Mass Index(BMI)</h1>
        <div class="content">
            <div class="col span-1-of-2 left">
                <h2>Calculator</h2>
                <ion-icon name="man"></ion-icon>
                <input type="radio" name="gender" id="gender_male" value="male"> Male
                <ion-icon name="woman"></ion-icon>
                <input type="radio" name="gender" id="gender_female" value="female"> Female
                <br>
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                    <div class="text"></div>
                </label>
       <br>
                <label for="height">Height:</label>
                <input type="number" id="height" name="height">
                <br>
                <label for="weight">Weight:</label>
                <input type="number" id="weight" name="weight">
                <br>
                <a href="#" class="btn">Calculate</a>
            </div>

            <div class="col span-1-of-2 right">
                <h2>What is a BMI?</h2>
            </div>
        </div>

        <script src="resources/js/app.js"></script>
    </body>

</html>

Solution

You can get the selected value by the following code. You need to predefined the selected value and also get the value of radio button when you select the button

//For male 
if(document.getElementById('gender_male').getAttribute('selected')){
  console.log("Male is selected")
}

//For female
if(document.getElementById('gender_female').getAttribute('selected')){
  console.log("female is selected")
}

function changeValue(value){
  console.log(value)
}

<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="resources/css/styles.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <title>BMI calculator</title>
</head>


<body>
    <h1>Body Mass Index(BMI)</h1>
    <div class="content">
        <div class="col span-1-of-2 left">
            <h2>Calculator</h2>
            <ion-icon name="man"></ion-icon>
            <input onChange="changeValue('male')" type="radio" name="gender" id="gender_male" value="male" selected="true"> Male
            <ion-icon name="woman"></ion-icon>
            <input onChange="changeValue('female')" type="radio" name="gender" id="gender_female" value="female"> Female
            <br>
            <label class="switch">
                <input type="checkbox">
                <span class="slider round"></span>
                <div class="text"></div>
            </label>
   <br>
            <label for="height">Height:</label>
            <input type="number" id="height" name="height">
            <br>
            <label for="weight">Weight:</label>
            <input type="number" id="weight" name="weight">
            <br>
            <a href="#" class="btn">Calculate</a>
        </div>

        <div class="col span-1-of-2 right">
            <h2>What is a BMI?</h2>
        </div>
    </div>

    <script src="resources/js/app.js"></script>
</body>

</html>

Checkout this example.