我正在尝试使用 HTML 和 JS 构建一个卡路里计算器，目前正在努力在屏幕上（或通过 console.log）显示输出。我知道我正在做一些非常基本的错误，但目前无法确定那是什么。
下面是我的 HTML 和 JS 代码：
document.getElementById("bmrForm").addEventListener("submit", calcBMR);
function calcBMR(gender, weightKG, heightCM, age) {
// Calculate BMR
if (gender = 'male') {
let BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5;
} else {
let BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161;
}
console.log(BMR);
}
<body>
<script src="./script.js"></script>
<section>
<form id="bmrForm" onsubmit="calcBMR()">
<input type="text" id="gender" placeholder="Male or female?">
<input type="number" id="weight" placeholder="Weight in KG">
<input type="number" id="height" placeholder="Height in CM">
<input type="number" id="age" placeholder="How old are you?">
<button type="submit" id="submitBtn">Do Magic!</button>
</form>
<p id="output">0</p>
</section>
</body>
为了达到您想要的结果，需要修改一些东西。
- 线路
document.getElementById("bmrForm").addEventListener("submit", calcBMR);不需要，因为我们可以直接将函数传递给onsubmit的属性form元素。
- The
gender, weightKG, heightCM, and age参数不会自动传入calcBMR功能。需要从文档中检索这些值。
- The
BMR变量需要定义在 if/else 块之上，因为scoping https://www.w3schools.com/js/js_scope.asp.
- A
return需要添加声明onsubmit属性，以便表单不提交并刷新页面。或者，如果所需的效果是更新屏幕上的文本，则button元素与一个click添加事件处理程序可能是一个更好的选择form with a submit处理程序。
- 字符串比较使用
== or ===在 JavaScript 中。因此，gender = 'male'部分需要改为gender === 'male'.
- 为了更新输出，元素的
textContent可以改变document.getElementById("output").textContent = BMR.
下面是经过上面列出的更改的代码。
function calcBMR() {
let gender = document.getElementById("gender").value;
let weightKG = document.getElementById("weight").value;
let heightCM = document.getElementById("height").value;
let age = document.getElementById("age").value;
let BMR;
// Calculate BMR
if (gender === 'male') {
BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5;
} else {
BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161;
}
console.log(BMR);
document.getElementById("output").textContent = BMR;
return false;
}
<body>
<script src="./script.js"></script>
<section>
<form id="bmrForm" onsubmit="return calcBMR()">
<input type="text" id="gender" placeholder="Male or female?">
<input type="number" id="weight" placeholder="Weight in KG">
<input type="number" id="height" placeholder="Height in CM">
<input type="number" id="age" placeholder="How old are you?">
<button type="submit" id="submitBtn">Do Magic!</button>
</form>
<p id="output">0</p>
</section>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
