无法将一个字段复制到另一个字段

时间:2016-05-12 03:15:52

标签: javascript

我试图获取水的价值,一旦用户点击蛋白质区域或从蛋白质区域中取出,就从蛋白质中复制值。我在这个网站上查了几个例子,但无法让他们中的任何一个使用我的代码。我确定这很简单,我只是不知道该怎么做。

<!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">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>&nbsp; <br>
    </div>
    &nbsp; <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>

2 个答案:

答案 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)