可以't无法将一个字段复制到另一个字段

Can't get one field to copy to another

本文关键字：字段 一个 复制 另一个 可以      更新时间：2023-09-26

我正在尝试获取水的值，以便在用户从蛋白质字段点击或从蛋白质字段中点击后复制该值。我在这个网站上查看了一些例子，但无法让其中任何一个与我的代码一起使用。我确信这是一件非常简单的事情，我只是不确定如何做。

<!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>

您可以尝试使用onblur()方法。一旦失去对该字段的关注，它就会运行代码。我发现你不能更改onblr方法中元素的值，所以你必须创建一个自定义方法并调用它。

<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;

}

不了解用例，但如下所示：

<input name="protein" id="protein" size="3" type="text" onchange="copyValue(event)">

"onchange"事件在值发生更改时触发。每个MDN：当元素在其值更改但未提交后失去焦点时（例如，在编辑<textarea>或<input type="text">的值后）

所以，我们只需要编写一个onchange处理程序：

function copyValue(event) {
    document.getElementById('dwi').value=event.target.value
}

这将复制触发事件的元素（即蛋白质输入）的值，并将其复制到ID为DWI的元素。

或者，你可以听一个模糊事件，然后运行半秒的"setTimeout"，然后运行代码从蛋白质复制到dwi。模糊会在每次人员离开字段时运行，而更改只会在发生实际更改（即6->7）时导致复制。

相关文章：