無効な入力の値を変更するHTML5は、関数を呼び出す必要があります

Question

私はHTML5ページで作業しています。入力コントロールには、oninputイベントが発生したときに計算用のJavaScript関数が呼び出されています。ここで

私のJS-機能のいずれかの例：

function txt_DFPG_calculation() { 
    var value_KE = ValidateNumberValue(document.getElementById("txt_KE").value.replace(",", ".")); 
    var value_result_A_B = ValidateNumberValue(document.getElementById("txt_result_A_B").value.replace(",", ".")); 
    if (value_KE != 0 && value_result_A_B != 0) { 
     document.getElementById("txt_DFPG").value = value_KE * value_result_A_B; 
    } 
    else { 
     document.getElementById("txt_DFPG").value = null; 
    } 
} 

、その関数を呼び出して入力の1：

<input id="txt_KE" 
     type="number" 
     step="0.01" 
     oninput="txt_DFPG_calculation();" 
     style="position: absolute; top: 115px; left: 40px; width: 80px; font-family: Arial; font-size: 12px; text-align: right" /> 

今私は問題がある、唯一の最初の入力その"txt_KE"を編集することができます。 2番目の入力「txt_result_A_B」の値は、2つの他の入力からの計算結果であり、編集できないため無効になっています。 2番目の入力は、たとえそれが無効になっていても読み込み専用であっても "txt_KE"と同じ機能を呼び出すことができますか？

私はonchangeイベントを試みましたが、これは役に立たなかったです。

ありがとうございます！

P .: ValidateNumberValueは、私が書いたJS関数で、別個のJSファイルにあります。

function ValidateNumberValue(value) { 
    if (isNaN(value) || value == "") { 
     value = 0; 
    } 
    return value; 
} 

Answer 1

私はより多くのunobtrusive JS方法をお勧めします - つまり、完全にあなたのHTMLのうち、JSを保ちます。代わりに、DOMを使用して作業し、必要な場所で同じ機能を使用してください。

// Create scope (avoids creating global functions/variables) 
 
(function() { 
 
    var 
 
    aEl = document.getElementById('txt_A'), 
 
    bEl = document.getElementById('txt_B'), 
 
    abEl = document.getElementById('txt_result_A_B'), 
 
    keEl = document.getElementById('txt_KE'), 
 
    dfpgEl = document.getElementById('txt_DFPG') 
 
    ; 
 

 
    function validateNumberValue(value) { 
 
    if (isNaN(value) || value == '') { 
 
     value = 0; 
 
    } 
 
    return value; 
 
    } 
 

 
    function calculate(firstEl, secondEl, resultEl) { 
 
    var 
 
     value1 = validateNumberValue(firstEl.value.replace(',', '.')), 
 
     value2 = validateNumberValue(secondEl.value.replace(',', '.')) 
 
    ; 
 
    
 
    if (value1 != 0 && value2 != 0) { 
 
     resultEl.value = value1 * value2; 
 
    } else { 
 
     resultEl.value = null; 
 
    } 
 
    } 
 

 
    function runCalculations() { 
 
    calculate(aEl, bEl, abEl); 
 
    calculate(keEl, abEl, dfpgEl); 
 
    } 
 

 
    keEl && keEl.addEventListener('input', runCalculations); 
 
    aEl && aEl.addEventListener('input', runCalculations); 
 
    bEl && bEl.addEventListener('input', runCalculations); 
 
})();

<p> 
 
    <input type="number" id="txt_A" placeholder="txt_A" /> * 
 
    <input type="number" id="txt_B" placeholder="txt_B" /> = (txt_result_A_B) 
 
</p> 
 
<p> 
 
    <input type="number" id="txt_KE" step="0.01" placeholder="txt_KE" /> * 
 
    <input type="number" id="txt_result_A_B" placeholder="txt_result_A_B" disabled /> = 
 
    <input type="number" id="txt_DFPG" placeholder="txt_DFPG" disabled /> 
 
</p>