JS 条件未按预期工作答案

【问题标题】：JS condition not working as expectedJS 条件未按预期工作
【发布时间】：2017-04-17 17:16:41
【问题描述】：

不同性别的基础代谢率应该有不同的数值。无论选择男性还是女性单选按钮，我的计算器都会显示男性的结果。

男性的 BMR 计算 BMR = 66.5 + ( 13.75 × 体重 kg ) + ( 5.003 × 身高 cm ) – ( 6.755 × 年龄 ) 女性 BMR 计算 BMR = 655.1 + (9.563 × 体重 kg) + (1.850 × 身高 cm) – (4.676 × 年龄)

<!DOCTYPE html>

<html>

<head>

<script>

var bmr;
function funcCalc() {
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var height = document.getElementById("height").value;
var weigth = document.getElementById("weigth").value;

if (gender == "masc") {
bmr = 66.5 + ( 13.75 * weigth ) + ( 5.003 * height ) - ( 6.755 * age )
}  else {
bmr = 655.1 + ( 9.563 * weigth ) + ( 1.850 * height ) - ( 4.676 * age )
}
document.getElementById("lblResult").innerHTML = bmr;
}

</script>

</head>

<body>

<form action="#">
  <input type="radio" name="gender" id="gender" value="masc" checked> Male<br>
  <input type="radio" name="gender" id="gender" value="fem"> Female<br>
  Age:<br>
  <input type="number" id="age" value="20"><br>
  Height:<br>
  <input type="number" id="height" value="180"><br>
  Weight:<br>
  <input type="number" id="weigth" value="80"><br>
</form>

<button type="button"
onclick="funcCalc()">
Result</button>

<p id="lblResult">BMR</p>

</body>

</html>

【问题讨论】：

您有两个 ID 为 gender 的元素。一页上应该只有一个 ID。你总是会得到第一个。
因为只有两个，你可以读取它的.checked 属性而不是它的值。那么如果true，你知道它是masc，否则fem。
否则，使用.querySelector获取选中的。 var gender = document.querySelector("input[name=gender]:checked").value

标签： javascript html

【解决方案1】：

id 属性的值在每个文档上必须是唯一的。所以你的 HTML 是无效的。相反，您可以使用getElementsByName 来获取元素并检查每个元素的值。

let elements = document.getElementsByName('gender');
let isMale = elements[0].value === 'masc' || elements[1].value === 'masc';

【讨论】：