2

投稿は初めてですが、このサイトにアクセスしたことがあります +/- x1000。

このスクリプトを拡張してより多くのフォーム フィールドを計算する方法に関する情報を本当に探しています。

現在、この html\jscript ページは、OnChange イベントを使用して 2 つのフォーム フィールドで SUM 計算を実行します。すべてがうまく機能しますが、計算範囲にフィールドを追加できません。

以下は動作中のコードです。現在のコードの試行を確認したい場合はお知らせください。あなたが提供できる助けに本当に感謝します。ありがとうございました。

<html> 
<head> 
<title>Calulate</title> 

<script type="text/javascript"> 
function calc(A,B,SUM) { 
  var one = Number(A); 
  if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } 
  var two = Number(document.getElementById(B).value); 
  if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } 
  document.getElementById(SUM).value = one + two;
} 
</script> 

<body> 
<form name="form" > 
Enter a number: 
<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" /> 
and another number: 
<input name="sum2" id="op2" value="" onChange="calc(this.value,'op1','result')" /> 
<br>
Their sum is: 
<input name="sum" value="" id="result" readonly style="border:0px;"> 
</form> 
</body> 
</html>
4

2 に答える 2

2

もちろん、複数の入力の合計を計算する関数を作成する方法はいくつかあります。既に持っているものを拡張することでこれを行うので、あなたが持っていたコードが実際に何をしていたのかについて理解を深めることができます. 最終的には、完全な書き直しを伴うより良い解決策があるかもしれません。

データ入力用のマークアップを追加する必要があります。

and a third number: 
<input name="sum3" id="op3" value="" />

関数宣言は、もう 1 つのパラメーターを受け入れるように変更する必要があります。

function calc(A,B,C,SUM) {

関数本体は、このパラメーターを次のように処理する必要があり、次のようAにB処理されます。

var three = Number(document.getElementById(C).value); 
if (isNaN(three)) { alert('Invalid entry: '+C); three=0; }

あなたの合計は、この新しい数を考慮に入れる必要があります:

document.getElementById(SUM).value = one + two + three;

onChange定義した新しいCパラメーターを渡すには、3 つの入力フィールドすべての属性を更新する必要があります。

<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','op3','result')" /> 
<input name="sum2" id="op2" value="" onChange="calc(this.value,'op1','op3','result')" /> 
<input name="sum3" id="op3" value="" onChange="calc(this.value,'op1','op2','result')" />

ここで、ID で要素にアクセスする代わりに、クラス名で要素にアクセスすることができます。たとえば、クラス名calcを 3 つの入力フィールドすべてに追加できます。このクラス名を関数に認識させるか、引数として渡すことができます。Aその場合、関数は、Bおよびを受け取る必要はありませんが、C必要なのはクラス名と出力フィールドの ID だけです。

function(className, SUM) {
    ...
}

関数内で、そのクラス名のすべての要素を見つけることができます。

var inputs = document.getElementsByClassName(className);

それらを反復処理し、値を追加します。

var sum = 0;
for(var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    var num = Number(input.value);

    if(isNaN(num)) { 
        alert('Invalid value: ' + input.value);
        num = 0;
    }

    sum += num;
}

document.getElementById(SUM).value = sum;

次に、クラス名を追加し、次のonChangeように属性を更新します。

<input name="sum1" class="calc" onChange="calc('calc','result')" /> 
<input name="sum2" class="calc" onChange="calc('calc','result')" /> 
<input name="sum3" class="calc" onChange="calc('calc','result')" />

その後、任意の数の入力フィールドを追加でき、関数を変更せずに自動的に計算されます。

于 2012-04-23T13:37:01.110 に答える
0

numbers1 つのアイデアは、特定のクラス (以下のコード) でマークされた入力フィールドの動的リストを作成することです。あなたの関数は、最初にそのようなすべてのフィールドのリストを取得し、それらすべてを実行してそれらを合計することができます。

function calc( classId, sumId ) {
  var els = document.querySelectorAll( '.' + classId ),
      sum = 0;

  for( var i=0, max=els.length; i<max; ++i ) {
     if( isNaN( els[i].value ) ) { 
       alert('Invalid entry: '+ els[i].value );
     } else {
       sum += els[i].value;
     }
  }

  document.getElementById( sumId ).value = sum;
}

入力フィールドは次のようになります。

<input name="sum2" id="op2" value="" class="numbers" onChange="calc( 'numbers', 'result' );" />

2 つの注意事項:

  1. 古いブラウザはサポートしていませんdocument.querySelectorAll。ここでポリフィルが必要になる場合があります。

  2. イベントも JS で割り当てたほうがよいでしょう。

2番目は次のように実現できます。

(function(){
  var els = document.querySelectorAll( '.' + inClass ),
      classId = 'numbers',
      sumId = 'result';

  for( var i=0, max=els.length; i<max; ++i ) {
     els[i].addEventListener( 'change', function(){ calc( classId, sumId ); } );
  }
})();
于 2012-04-23T13:41:16.833 に答える