-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. 更新函数由两个语句组成。我将按照执行的顺序向您介绍他们的执行过程。
  3. document.getElementsByClassName被调用并返回一个HTMLCollection. 此集合不是数组。
  4. 因为我想要一个数组，所以我HTMLCollection使用Array.prototype.slice.call.
  5. 现在我有了一个Array，我称它为reduce 成员，它允许我遍历元素并将状态从调用传递到它所需要的函数的调用。
  6. 我提供的 reduce 参数是：为每个值调用的函数和初始值 (0)。
  7. 该函数将被调用三次，首先是第一个范围输入 asa和 0 as b。然后它将返回范围输入的值与 0 之和，即查看 1 个元素后的中间和。以下对匿名函数的调用会将中间和与其他两个输入字段的值相加。
  8. 现在已经分配了变量，我们通过分配ID 为（使用检索）的元素的属性sum将其放入元素中以进行显示。sumresultinnerHTMLsumresultdocument.getElementById
于 2013-02-23T14:35:16.770 回答