JavaScriptのリアルタイム検証と計算2つ以上の入力テキストフィールド

Question

送信ボタンを必要とせずにJavaScriptのリアルタイム計算oninputを行いたいと思います。

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

その有効その後、計算結果がそうでなければ空または持つ誤った値

のいずれかにあるフィールドの上に警告メッセージを表示した場合、あなたは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> 

//このマークアップ

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

と以下のJSコード