javascript - 从 获取单选值

Question

这是一个计算理想体重的简单网页。我的问题是，当我输入详细信息并选择男性或女性的单选按钮时，第一个条件仅适用，而其他条件无效。选择其中一个就是给我第一个条件答案。

错误是什么？我从表单中获取高度值没有问题，但性别值给出了这个错误。

When selected male it is giving the first condition only which is Female

function calculateWeight() {
  var men = 22 * Math.pow(document.getElementById('height').value, 2);
  var women = 22 * Math.pow(document.getElementById('height').value - 0.1, 2);

  if (document.getElementById('genderFemale').value == "female") {
    alert("The Ideal weight for you(women) is : " + women);
  } else if (document.getElementById('genderMale').value == "male") {
    alert("The Ideal weight for you (men) is : " + men);
  }

}

<header class="header-content">
  <div class="logo">
    <h2>
      <a href="index.html"></a>
    </h2>
  </div>
  <nav class="nav-content">
    <ul>
      <li><a href="index.html">Calculator</a></li>
      <li><a href="#">Ideal Weight Table</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<div class="row">
  <aside>
    <nav class="side-nav">
      <ul>
        <li><a href="index.html">Calculator</a></li>
        <li><a href="#">Ideal Weight Table</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </aside>
  <section class="content-body">
    <div class="row">
      <form>
        <div style="margin: 0 100px 20px 100px; text-align:  center; border-color: #33F9FF ">
          <h2> Input Following Requirements :</h2>
          Age: <input style="margin-left: 43px; padding: 0;" type="number" name="Age">
          <br><br> Height:
          <input style="margin-left: 30px; padding: 0; width: 102px" list="units" type="number" step="any" name="Height" id="height">
          <select name="Unit" id="units">
									<option selected="selected">Unit ...</option>
									<option value="">inch</option>
									<option value="">ft</option>
									<option value="">cm</option>
									<option value="">metre</option>
								</select>

          <br><br> Gender:
          <input type="radio" name="gender" id="genderMale" value="male" checked style="margin-left: 20px; padding: 0;"> Male
          <input type="radio" name="gender" id="genderFemale" value="female"> Female
          <input type="radio" name="gender" value="other"> Other
          <br>
          <br>

          <input type="submit" value="Calculate" onclick="calculateWeight()">
        </div>
      </form>
    </div>
  </section>
</div>
<footer>

</footer>

Answer 1

要达到预期结果，请使用 document.getElementById('genderFemale').checked 和document.getElementById('genderMale').checked 因为这些 id 的值始终分别为 female 和 male

JS:

function calculateWeight()
{

var men = 22*Math.pow(document.getElementById('height').value,2);
var women = 22*Math.pow(document.getElementById('height').value - 0.1,2);

    if (document.getElementById('genderFemale').checked) 
    {
        console.log(document.getElementById('genderFemale').value)
      alert("The Ideal weight for you(women) is : " +women);
    } 
      else if (document.getElementById('genderMale').checked)
    { 
      console.log(document.getElementById('genderMale').value)
      alert("The Ideal weight for you (men) is : " +men);
    }
    }

HTML::为每个单选按钮添加 onchange 函数以调用 calculateWeight() 函数

Height:<input style="margin-left: 30px; padding: 0; width: 102px" list="units" type="number" step="any"  name="Height" id="height">

Gender:
<input type="radio" name="gender" id="genderMale" value="male" checked style="margin-left: 20px; padding: 0;" onchange="calculateWeight()"> Male

<input type="radio" name="gender" id="genderFemale" value="female" onchange="calculateWeight()"> Female

<input type="radio" name="gender" value="other" onchange="calculateWeight()"> Other

https://codepen.io/nagasai/pen/GxgZmO?editors=1011