Проверка и вычисления в реальном времени в реальном времени 2 или более текстовых полей ввода

Question

Я хочу выполнить вычисления в реальном времени JavaScript в режиме реального времени, без необходимости кнопки отправки.

Я знаю, как выполнять вычисления в реальном времени в JavaScript, когда у меня есть 1 текстовое поле ввода. Я использую событие oninput для входного текстового поля.

Но как насчет того, когда у меня есть 2 текстовых поля?

Я хочу, чтобы сделать что-то вроде этой ссылки, где он проверяет и вычисляет без необходимости кнопки отправки:

https://www.easycalculation.com/algebra/modulo-calculator.php

Возьмите следующий код, например:

// input 
var a = document.getElementById("a").value; 
var b = document.getElementById("b").value; 

// calculation 
var result = a * b; 

// display result 
document.getElementById("result").value; 

Поскольку есть 2 входных текстовых поля (a и b), я хочу, чтобы он выполнял вычисления моментального/реального времени только ПОСЛЕ того, как пользователь ввел допустимые данные в текстовые поля BOTH.

Но я также хочу, чтобы он выполнял вычисления в реальном времени, если пользователь меняет любое поле. Поэтому, если они вводят «a» и «b», он дает результаты, но если они меняют «a», тогда он сразу дает новые результаты, без необходимости касаться «b» вообще.

Как вы предлагаете мне это делать? Потому что я не хочу, чтобы ответ продолжал отображаться как нуль сразу после ввода в первом текстовом поле. Я хочу, чтобы он подождал, пока оба поля будут введены и проверены номера до того, как они начнут вычисление в реальном времени. Я также добавлю к этому код проверки.

благодаря

Answer 1

Просто попробуйте и сформулировать проблему таким образом, чтобы компьютер мог понять.

Я сделаю только некоторый псевдокод. Итак, вы хотите, чтобы вычислить что-нибудь:

function calculate (valueA, valueB) { 
    ... do something ... 
    ... output result ... 
} 

Вы хотите проверить, если оба поля являются действительными, и только затем сделать расчет и вывод:

function checkFields (fieldA, fieldB) { 
    if (fieldA.value.length > 0) { // if it is empty, there is no input 
     ... do some additional checking ... 
     if (fieldB.value.length > 0) { // if it is empty, there is no input 
      ... do some additional checking ... 
      ... if all went well: calculate (fieldA.value, fieldB.value); 
     } 
    } 
} 

затем привязать ваш checkFields к обоим полям ввода, и компьютер понимает.

Answer 2

вы должны написать функцию, как Validate(), где вы должны проверить значение обоих полей inpute, если его действительным затем вычислить результат в противном случае появляется сообщение предупреждение над полем, которое либо пусто, либо, имеющего неправильное значение

Вы должны вызвать функцию проверки на событии обмена в обоих входах

Answer 3

Это не совсем так, как я написал бы это в производственной среде. но это должно по крайней мере дать вам хорошее начало для того, что вы ищете - основные функции, которые вы описали.

<form> 
    <input id='a' class='ab' type='text' name='valA'> 
    <input id='b' class= 'ab' type='text' name='valB'> 
</form> 

// JS код ниже этой разметке

var someCompositeGroup = document.getElementsByClassName("ab"); 

function validateForm(){ 

    // add stuff here 
    var inputVal = 0; 
    var aVal = someCompositeGroup[0] && someCompositeGroup[0].value; 
    var bVal = someCompositeGroup[1] && someCompositeGroup[1].value; 

    if (aVal && bVal && !isNaN(aVal) && !isNaN(bVal)) { 
     inputVal = aVal * bVal; 
     // only update here - 
     console.log(inputVal); 
    } else { 
     console.log(' not ready to calculate yet '); 
    } 
} 

for (var i = 0; i < someCompositeGroup.length; i++) { 
    someCompositeGroup[i].addEventListener('keyup', validateForm); 
}