JavaScript實時驗證和計算2個或更多輸入文本字段

Question

我想在輸入時執行JavaScript實時計算，而無需提交按鈕。

當我有1個輸入文本字段時，我知道如何在JavaScript中進行實時計算。 我將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），因此我希望它僅在用戶在兩個文本字段中都輸入了有效數據之后才進行即時/實時計算。

但是，如果用戶更改任一字段，我也希望它進行實時計算。 因此，如果他們輸入“ 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字段的值是否有效，然后計算結果，否則在該字段上方顯示警告消息，該消息可能為空或值錯誤

您必須在兩個輸入的onchange事件上調用validate函數

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);
}