How to make input field editable while it generates an input-CodePudding

I have multiple input fields on my form and certain fields generate numbers based on complex mathematical operations taken from other input fields.

Example input field

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

The mathematical operation generated on that input I want to change

 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;

What I want to achieve is to make an input field editable while it also propagates numbers. When I try to change the number already propagated on the unGasRate input field it doesn't work as it rollbacks to the number it already propagated while the onblur triggers.

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

What I tried to do is reverse the operation and do something like unGasRate/3600 so I can get the input number on the other 2 inputs that propagates the result on unGasRate but it didn't quite work.

Code is much bigger then this but I've updated a demonstration of the problem below.

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>

CodePudding user response：

Test for which element is being blurred before running your logic.

First, add an argument to the calcRowWash() function, so it looks like this:

function calcRowWash = (function(ev) {

Then, check the target member variable of ev for its ID and change your logic for what happens:

if(ev.target.id === "unGasRate") { 

    //logic here based on event target

} else if (ev.target.id === "anotherElement") {

    //other logic for this field

} else if...

Just figure out what the difference is between each target, and write specific code in there, trying not to duplicate your code. You might want to write another function to repeat logic.