用Javascript总结

Question

我有一个问题希望有人可以帮助我。

我的页面上有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），然后显示结果。

问候。

Answer 1

解决方案

<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 member，它允许我遍历元素并将状态从调用传递给调用函数。
6. 我提供的reduce的参数是：为每个值调用的函数，以及初始值（0）。
7. 该函数将被调用三次，首先将第一个范围输入设置为a，将0设置为b。然后它将返回range-input和0的值之和，这是查看1个元素后的中间和。以下对匿名函数的调用将中间和与其他两个输入字段的值相加。
8. 现在分配了sum变量，我们将sumresult元素放在innerHTML元素中，方法是指定ID为sumresult的元素的document.getElementById属性（使用{{1}}）检索。