用JS显示计算的Html输出 [英] Using JS to show HTML output of calculation
本文介绍了用JS显示计算的Html输出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用HTML和JS构建一个卡路里计算器，目前正在努力在屏幕上(或通过console.log)显示输出。我知道我正在做一些非常基本、非常错误的事情，但目前无法确定是什么。
下面是我的HTML和JS代码：
数据-lang="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);行，因为我们可以将函数直接传递给form元素的onsubmit属性。 gender、weightKG、heightCM和age参数不会自动传递给calcBMR函数。需要从文档中检索值。- 由于scoping，需要在If/Else块上方定义
BMR变量。 - 需要向
onsubmit属性添加return语句，以便表单不会提交和刷新页面。或者，如果期望的效果是更新屏幕上的文本，则添加了click事件处理程序的button元素可能比添加了submit处理程序的form元素更好。 - 字符串在JavaScript中使用
==或===进行比较。因此，gender = 'male'部分需要更改为gender === 'male'。 - 为了更新输出，可以使用
document.getElementById("output").textContent = BMR更改元素的textContent。
下面是包含上面列出的更改的代码。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">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>这篇关于用JS显示计算的Html输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
