时间戳

首页 > 解决方案 > Javascript：表单中的实时计算

javascript - Javascript：表单中的实时计算

问题描述

使用 JavaScript 我正在开发一个表格，该表格可以根据体重和身高输入实时计算某人的 BMI 和 TBW。我正在使用 addEventListener 和 onkeyup。我对 JavaScript 很陌生，所以请耐心等待。我究竟做错了什么？

更新：我已听从建议，将“onkeyup”事件替换为“oninput”，并将身高和体重值放入函数中。我还添加了.value。我仍然有问题。

<body>
<form id="adime-form" name="adime" method="post">
<div class="three-column clear">
  <label for="">Age</label>
  <input type="number" name="age" id="age"> <!--Input-->
</div>
<div class="three-column">
  <label for="">Sex</label>
  <input type="text" name="sex" id="sex"><!--Input-->
</div>
<div class="three-column">
  <label for="">Height</label>
  <input type="number" name="height" id="height"><!--Input-->
</div>
<div class="three-column">
  <label for="">Weight</label>
  <input type="number" name="weight" id="weight"><!--Input-->
</div>
<div class="three-column">
  <label for="">BMI</label>
  <input type="text" name="bmi" id="bmi" oninput="returnBmi"><!--Output-->
</div>
<div class="three-column">
  <label for="">Total Body Water</label>
  <input type="text" name="tbw-perc" id="tbw-perc" oninput="returnTbw"><!--Output-->
</div>
</form>
	
<script>

var getAge = document.getElementById("age");
var getSex = document.getElementById("sex");

document.getElementById("bmi").addEventListener("input", returnBmi);
document.getElementById("tbw-perc").addEventListener("input", returnTbw);
	
function returnBmi(){
	var getHeight = document.getElementById("height").value;
	var getWeight = document.getElementById("weight").value;
	var getBmi = getWeight / (getHeight**2) * 703;
	document.getElementById("bmi").innerHTML = getBMI;
	
}
	
function returnTbw(){
	var getHeight = document.getElementById("height").value;
	var getWeight = document.getElementById("weight").value;
	var getTbw = -2.097 + 0.1069 *( getHeight * 2.54)  + 0.2466 * (getWeight * .45);
	document.getElementById("tbw-perc").innerHTML = getTbw;
	}


</script>

在此处输入代码

标签： javascript

解决方案

考虑在输入上使用 'input' 事件：document.getElementById("bmi").addEventListener("input", returnBmi);

此外，在更新函数中获取 Weight 和Height值：

function returnBmi(){
  var getHeight = document.getElementById("height").value;
  var getWeight = document.getElementById("weight").value;
  var getBmi = getWeight / (getHeight**2) * 703;
  document.getElementById("bmi").innerHTML = getBMI;
}

因为您需要在触发事件时提取值。

推荐阅读