Трудно выбрать javascript входные радиостанции - PullRequest
Новая
       45

Трудно выбрать javascript входные радиостанции

1 голос
/ 11 марта 2020

У меня есть веб-сайт, который просит пользователя выбрать либо мужской, либо женский вариант с помощью радиовходов. У меня возникают трудности при выводе сообщения на консоль, когда у меня выбран либо самец, либо самка. Я не уверен, почему мой 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>

Ответы [ 3 ]

0 голосов
/ 11 марта 2020

Вы можете получить выбранное значение с помощью следующего кода. Вам необходимо предварительно определить выбранное значение, а также получить значение переключателя при выборе кнопки 

//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>

Оформить заказ в этом примере.

0 голосов
/ 11 марта 2020

Вы можете использовать всплывающее окно событий в ваших интересах здесь. 

<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);
});
0 голосов
/ 11 марта 2020

Должно ли это печататься при загрузке страницы или только при изменении? В любом случае, если вы хотите, чтобы сообщение выводилось на консоль в любое время, когда поле было изменено, событие 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

Если вы также хотите запускаться при загрузке, используйте «гендерный контроль ()» при загрузке, и он будет запускаться при загрузке страницы.

...