JS条件不能按预期工作
问题描述:
不同性别的基础代谢率应该有不同的值。我的计算器显示男性是否选择男性或女性单选按钮的结果。JS条件不能按预期工作
男性BMR计算BMR = 66.5 +(13.75×体重kg)+(5.003×身高cm) - (6.755×年龄) BMR计算女性BMR = 655.1 +(9.563×体重kg )+(1.850×高厘米) - (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
属性的值必须在每一份文件是唯一的。所以你的HTML是无效的。相反,您可以使用getElementsByName
来获取元素并检查每个元素的值。
let elements = document.getElementsByName('gender');
let isMale = elements[0].value === 'masc' || elements[1].value === 'masc';
你有两个带有'gender' ID的元素。一个页面上只能有一个ID。你总是会获得第一名。 – 2017-04-17 17:19:00
由于只有两个,你可以阅读它的'.checked'属性而不是它的值。那么如果'真',你知道它是'masc',否则'fem'。 – 2017-04-17 17:19:39
否则,使用'.querySelector'来获取选中的一个。 'var gender = document.querySelector(“input [name = gender]:checked”).value' – 2017-04-17 17:21:44