Javascript中的求和

我有个问题，希望有人能帮我

我的页面上有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)

解决方案

var update=函数（）{
var总和=
Array.prototype.slice.call(
document.getElementsByClassName（“rangefield”）
).减少(
功能（a、b）{
返回a+数字（b值）；
},
0
);
document.getElementById（“sumresult”）.innerHTML=sum；
};

JSFiddle：

工作原理
更新字段时，将调用
update（）
函数
update函数由两条语句组成。我会按照执行的顺序带你看他们的执行情况
调用
document.getElementsByClassName
并返回
HTMLCollection
。此集合不是数组
因为我需要一个数组，所以我使用
array.prototype.slice.call
将
HTMLCollection
转换为一个数组
现在我有了一个
数组
，我调用了它，它允许我遍历元素并将状态从调用传递到调用它所使用的函数
我提供的reduce参数是：为每个值调用的函数，以及初始值（0）
该函数将被调用三次，首先，第一个范围输入为
a
，0为
b
。然后它将返回范围输入值和0的和，这是查看1元素后的中间和。以下对匿名函数的调用将中间和与其他两个输入字段的值相加
既然分配了
sum
变量，我们将其放入
sumresult
元素中，通过将元素的
innerHTML
属性分配给ID为
sumresult
（使用
document.getElementById
检索）来显示
创建一个JSFIDLE并向我们展示到目前为止您所做的工作。我想您要问的是如何访问输入元素并添加它们的值。在传统的javascript中，可以使用document.getElementsByTagName（“输入”），在它返回的数组上循环并添加到结果变量。如果这还不清楚，在继续之前，您应该阅读更多关于DOM访问和事件处理的内容…希望它能有所帮助！
<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>