-1

誰かが私を助けてくれることを願って質問があります。

私のページには3つの異なる範囲入力があります：

<input type="range" name="test1" min="0" max="50" value="0" step="5" onchange="showValue(this.value) 
<input type="range" name="test2" min="0" max="50" value="0" step="5" onchange="showValue(this.value)
<input type="range" name="test3" min="0" max="50" value="0" step="5" onchange="showValue(this.value)

そして、JSに（test1 + test2 + test3）のように、ユーザーが選択した入力の値の合計を計算して、結果を表示させたいと思います。

よろしく。

4

1 に答える 1

0

解決

<script>
var update = function() {
    var sum = 
      Array.prototype.slice.call(
        document.getElementsByClassName("rangefield")
      ).reduce(
        function (a, b) {
          return a + Number(b.value);
        },
        0
      );
    document.getElementById("sumresult").innerHTML = sum;
};
</script>

<input type="range" class="rangefield" onchange="update()" onkeyup="update()">
<input type="range" class="rangefield" onchange="update()" onkeyup="update()">
<input type="range" class="rangefield" onchange="update()" onkeyup="update()">
<div id="sumresult"></div>

JSFiddle : http://jsfiddle.net/ysangkok/nVNjk/1/

使い方

  1. フィールドが更新されると、update()関数が呼び出されます
  2. update 関数は 2 つのステートメントで構成されます。それらの実行について、発生順に説明します。
  3. document.getElementsByClassNameが呼び出され、 が返されますHTMLCollection。このコレクションは配列ではありません。
  4. 配列が必要なので、 を使用して を配列に変換HTMLCollectionしArray.prototype.slice.callます。
  5. ができたので、それをreduce メンバーArrayと呼びます。これにより、要素をウォークスルーし、呼び出しから呼び出しに必要な関数の呼び出しに状態を渡すことができます。
  6. 私が提供する reduce の引数は、各値に対して呼び出される関数と初期値 (0) です。
  7. 関数は 3 回呼び出されます。最初の range-input は としてa、0 は として呼び出されbます。次に、range-input の値と 0 の合計を返します。これは、1 つの要素を調べた後の中間合計です。次の無名関数の呼び出しは、中間合計を他の 2 つの入力フィールドの値と合計します。
  8. sum変数が割り当てられたので、( を使用して取得した)の ID を持つ要素sumresultのプロパティを割り当てて、表示用の要素に配置します。innerHTMLsumresultdocument.getElementById
于 2013-02-23T14:35:16.770 に答える