我试图获取水的价值,一旦用户点击蛋白质区域或从蛋白质区域中取出,就从蛋白质中复制值。我在这个网站上查了几个例子,但无法让他们中的任何一个使用我的代码。我确定这很简单,我只是不知道该怎么做。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-
1252">
<title>Dr. Kosimides Lean Body Academy Calculator</title>
<style>
body
{
background:#adff00;
}
main
{
border:2px solid #504E4F;
padding:5px 5px;
background:#1BA1E2;
width:225px;
border-radius:10px;
text-align: center;
margin-right:auto;
margin-left:auto;
}
h1
{
color:#9F9D9E
text-align:center;
font-size: 24px;
}
</style>
<form name="lbac" id="lbac">
<main>
<form>
<h1>LBA Calculator</h1>
<div align="center"><label> Weight <input name="weight"
id="weight" size="5" type="text" autofocus> (lbs) </label>
<label><p></p>
Body Fat <input name="bodyfat" id="bodyfat" size="3"
type="text"> (%) </label></div>
<div align="right">
<br>
</div>Recommended Amounts
<div align="right"><label> Protein <input name="protein"
id="protein" size="3" type="text"> </label><br>
</div>
<div align="right"><label> Water <input name="water" id="water"
size="3" type="text"> </label> <br>
</div>
<br>
<br>
<div align="left"><label> Pounds of Body Fat <input name="lbf"
id="lbf" size="3" type="text"> (lbs) </label><br>
</div>
<div align="left"><label> Lean Body Mass <input name="lbm"
id="lbm" size="3" type="text"> (lbs) </label><br>
</div>
<div align="left"><label> Daily Water Intake <input name="dwi"
id="dwi" size="3" type="text"> (oz) </label><br>
</div>
<div align="left"><label> Daily Protein Intake <input
name="dpi" id="dpi" size="3" type="text"> (g) </label><br>
</div>
<input name="Calculate" value="Calculate" onclick="LBAcalc()"
type="button">
<input name="Reset" value="Reset" type="reset">
</form>
</main>
<script>
document.lbac.water.value=".5";
document.lbac.protein.value=".5"
function LBAcalc()
{
// Get The Input
var w_txt = document.getElementById('weight');
var bf_txt = document.getElementById('bodyfat');
var p_txt = document.getElementById('protein');
var wtr_txt = document.getElementById('water');
// Convert To Numbers If Needed
var w = parseInt(w_txt.value);
var bf = parseInt(bf_txt.value);
var p = parseFloat(p_txt.value);
var wtr = parseFloat(wtr_txt.value);
// Convert body fat to percentage
bf = bf / 100
// Process and Display Results
var result = document.getElementById ('lbf');
var myResult = w * bf;
result.value = myResult.toFixed(0);
var result1 = document.getElementById ('lbm');
var myResult1 = w - myResult;
result1.value = myResult1.toFixed(0);
var result2 = document.getElementById ('dwi');
var myResult2 = myResult1 * wtr;
result2.value = myResult2.toFixed(0);
var result3 = document.getElementById ('dpi');
var myResult3 = myResult1 * p;
result3.value = myResult3.toFixed(0);
}
</script>
</body></html>
答案 0 :(得分:0)
您可以尝试使用onblur()
方法。一旦对该字段的关注丢失,它就会运行代码。我发现你无法改变onblur方法中元素的值,所以你必须创建一个自定义方法并调用它。
<input name="protein" id="protein" size="3" type="text" onblur="copyValue(this)">
在<script>
和</script>
标记内以及function LBAcalc() { .....}
之后
创建一个新函数来复制值。
function copyValue(element) {
element.value = document.getElementById("water").value;
}
答案 1 :(得分:0)
不了解用例,但这里是:
<input name="protein" id="protein" size="3" type="text" onchange="copyValue(event)">
&#39; onchange&#39;值已更改时触发事件。 Per MDN:当元素值改变后失去焦点但未提交时(例如,在编辑&lt; textarea&gt;或&lt; input type =&#34; text&#34;&gt;的值)之后
那么,我们只写一个onchange处理程序:
function copyValue(event) {
document.getElementById('dwi').value=event.target.value
}
这将复制触发事件的元素(即蛋白质输入)中的值,并将其复制到ID为DWI的元素。
或者,您可以收听模糊事件,然后运行&#39; setTimeout&#39;半秒,然后运行代码从蛋白质复制到dwi。每当人离开场地时,模糊就会运行,而变化只会导致副本在实际发生变化时发生(即6 - > 7)