如何使输入字段在生成输入时可编辑

Question

我的表单中有多个输入字段，某些字段根据从其他输入字段中获取的复杂数学运算生成数字。

输入字段示例

<td><input class="form-control inputField"  type="number" step="any" id="beUncorrectedGasRateWet" name="beUncorrectedGasRate[]" onblur="wetGasMeterRemake()" value="" ></td>

我想要改变的输入生成的数学运算

var tGasConsumption = document.getElementById("tGasConsumption70dry"); 
var gConsumptionMath = 0;
var tGasConsumptionMath = tGasConsumption;     
if (gConsumption.value !="") gConsumptionMath = parseFloat(gConsumption.value); 
if (tGasConsumption.value !="") tGasConsumptionMath = parseFloat(tGasConsumption.value); 
var totalCunGasRate = ((gConsumptionMath / tGasConsumptionMath) *3600);                
document.getElementById("unGasRate").value = totalCunGasRate;

我想要实现的是使输入字段可编辑，同时它也传播数字。当我试图改变已经在unGasRate输入字段上传播的数字时，它不起作用，因为它回滚到它已经在onblur触发时传播的数字。

<td><input class="form-control inputField gasConsumption"  type="number" step="any" id ="gConsumption" name = "beGasConsumption[]" value="" ></td>
<td><input class="form-control editField gasConsumption" type="text default" id="tGasConsumption70dry" name="beTimeGasConsumption[]"  value="" readonly></td>
<td><input class="form-control inputField"  type="number" step="any" id="unGasRate" name="beUncorrectedGasRate[]" value="" ></td>

我试图做的是逆转操作并做一些像unGasRate/3600这样的事情，这样我就可以在其他2个输入上获得输入数字，这些输入将结果传播到unGasRate上，但它并没有完全工作。

代码比这大得多，但我已经更新了下面的问题演示。

calcRowWash = (function() {
var gConsumption = document.getElementById("gConsumption");
var tGasConsumption = document.getElementById("tGasConsumption");
/*         var atmPressure = document.getElementById("atmPressure");
var mPressire = document.getElementById("mPressire"); */

var defaultMath = 0;
var tGasConsumptionMath = tGasConsumption;
if (gConsumption.value != "") defaultMath = parseFloat(gConsumption.value);
if (tGasConsumption.value != "") tGasConsumptionMath = parseFloat(tGasConsumption.value);
var totalC = ((defaultMath / tGasConsumptionMath) * 3600).toFixed(3);
/*    var totalC2 = (288.15*(atmPressure + mPressire) / (1013.25*(273.15+G21))); */
document.getElementById("unGasRate").value = totalC;
});

(G14)Burner Pressure: <br>
<input type="text" id="bPressure" name="bPressure" size="5" tabindex="13" /><br> (G15)Gas Consumption: <br>
<input type="text" id="gConsumption" name="gConsumption" size="5" tabindex="13" onblur="calcRowWash()" value="" maxlength="8" /><br> (G16)Time for Gas Consumption:<br>
<input type="text" id="tGasConsumption" name="tGasConsumption" size="5" tabindex="14" value="120" onblur="calcRowWash()" maxlength="8" /> <br> (G17)Uncorrected Gas Rate: <br>
<input type="text" id="unGasRate" name="unGasRate" size="5" tabindex="13" onblur="calcRowWash()" maxlength="8" /><br>
<!-- above is working fine! -->
<!-- below is not finished yet! -->
(G18)Meter Correction Factor:<br>
<input type="text" id="mCorrectionFactor" name="mCorrectionFactor" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br> (G19)Atmospheric Pressure: <br>
<input type="text" id="atmPressure" name="atmPressure" size="5" tabindex="14" value="" /> <br> (G20)Meter Pressure: <br>
<input type="text" id="mPressire" name="mPressire" size="5" tabindex="13" onblur="calcRowWash()" /><br> (G21)Meter Temperature:<br>
<input type="text" id="mTemperature" name="mTemperature" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br>
<!-- mathematical operation required** -->
(G22)Gas Volume Correction Factor:<br>
<input type="text" id="gVolCorrectionFactor" name="gVolCorrectionFactor" size="5" tabindex="14" value="" /> <br>
<!-- mathematical operation required** -->
(G23)Corrected Gas Rate:<br>
<input type="text" id="corGasRate" name="corGasRate" size="5" tabindex="13" onblur="calcRowWash()" /><br>
<!-- mathematical operation required** -->
(G24)Test Gas NET CV:<br>
<input type="text" id="TestGasNetCv" name="TestGasNetCv" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br>
<!-- mathematical operation required** -->
(G25)ACTUAL NET HEAT INPUT:<br>
<input type="text" id="actNetHeatInput" name="actNetHeatInput" size="5" tabindex="14" value="" /> <br>
<!-- mathematical operation required** -->
(G26)Nominal NET Heat Input: <br>
<input type="text" id="devNominalNetHeatInp" name="devNominalNetHeatInp" size="5" tabindex="13" onblur="calcRowWash()" value="175" /><br>
<!-- mathematical operation required** -->
(G27)Deviation from Nominal NET Heat Input:<br>
<input type="text" id="devNominalNetHeatInp" name="devNominalNetHeatInp" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br>

Answer 1

在运行逻辑之前测试哪个元素是模糊的

首先，向calcRowWash()函数添加一个参数，如下所示:

function calcRowWash = (function(ev) {

然后，检查ev的target成员变量的ID，并更改发生的情况的逻辑:

if(ev.target.id === "unGasRate") { 
//logic here based on event target
} else if (ev.target.id === "anotherElement") {
//other logic for this field
} else if...

只要找出每个目标之间的区别，并在其中编写特定的代码，尽量不要重复您的代码。您可能需要编写另一个函数来重复逻辑。