难以选择 javascript 输入收音机

Question

我有一个网站要求用户通过无线电输入选择男性或女性选项。当我选择了男性或女性时，我很难将消息输出到控制台。我不确定为什么我的 javascript 没有输出相关的 console.log 消息。 任何帮助将非常感激。 相关代码如下

    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/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/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>

Answer 1

您可以通过以下代码获取选定的值。您需要预定义选择的值，并在选择按钮时获取单选按钮的值

//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/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/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>

查看此示例。

Answer 2

应该在页面加载时打印还是仅在更改时打印？无论哪种方式，如果您想在任何时候更改框时将消息打印到控制台，onchange 事件将是最简单的方法：

function genderCheck(){
    //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');
     }
    }

<input type="radio" name="gender" id="gender_male" onchange="genderCheck()" value="male"> Male
<input type="radio" name="gender" id="gender_female" onchange="genderCheck()" value="female"> Female


  

如果您还想在加载时运行，请在加载时使用“genderCheck()”，它将在页面加载时触发。

Answer 3

您可以在这里使用事件冒泡来发挥您的优势。

<div className="details__radio--wrapper" id="gender">
  <label class="details__container">Male
      <input id="male" type="radio" name='gender' value="Male" />
  </label>
  <label class="details__container">Female
    <input id="female" type="radio" name='gender' value="Female" />
  </label>
</div>

JS代码将是。

document.getElementById("gender").addEventListener("change", function(e) {
    console.log(e.target.value);
});