Question

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

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

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

＆＃13;

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);
  }

}

＆＃13;

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

＆＃13;

Answer 1

要达到预期效果，请使用 document.getElementById（＆＃39; genderFemale＆＃39;）。已选中， document.getElementById（＆＃39; genderMale＆＃39;）。已选中，因为这些ID的值始终分别为女性和男性

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

Answer 2

问题是你从收音机盒中获取静态值。如果您查看if语句中的信息，您将看到该值始终相同。

<input type="radio" name="gender" id="genderFemale" value="female">

无论你检查哪个盒子，“女性”的价值总是“女性”。

要获取选中的单选按钮，您必须通过checked属性“检查”是否已选中按钮本身。见下文：

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

Answer 3

你可以这样做：

Height:<input style="margin-left: 30px; padding: 0; width: 102px" list="units" type="number" step="any"  name="Height" id="height">
<div id="myForm">
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
</div>

<input type="submit" id="submit">

和js：

document.getElementById("submit").onclick = function(){

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

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

制作了jsfiddle

Answer 4

除非您需要＆lt; IE8兼容性，否则您可以考虑切换到document.querySelector，如下所示：

var value = document.querySelector('[name=gender]:checked').value;
if (value === "female") {
  alert("The Ideal weight for you(women) is : " +women);
} else if (value == "male") { 
  alert("The Ideal weight for you (men) is : " +men);
}

从<form>获取无线电值

4 个答案: