HTML5, изменяющий значение отключенного ввода, должен вызывать функцию

Question

Я работаю над страницей HTML5, в которой у меня есть некоторые элементы управления вводом, которые вызывают функции JavaScript для вычислений, в то время как их oninput-event срабатывает.

Вот пример одного из моих 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; 
    } 
} 

и один из входов, которые вызывает эту функцию:

<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» можно редактировать. Значение второго ввода «txt_result_A_B» результатов расчета с двух других входов и не может быть отредактировано, поэтому оно отключено. Как второй вход может вызвать ту же функцию, что и «txt_KE», даже если он отключен или только для чтения?

Я пробовал событие onchange, но это не помогло.

Заранее благодарен!

P.S .: ValidateNumberValue - это JS-функция, которую я написал и которая находится в отдельном JS-файле.

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

Answer 1

Я бы рекомендовал более unobtrusive JS метод - то есть, держать JS из вашего HTML вообще. Вместо этого, работайте с 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>