Javascript 从多个输入字段中获取平均值（范围）

我已经寻找解决方案好几天了，我是javascript的初学者

这是我用来通过滑块输入值的表单。

1
1
1

我需要从这些滑块的输入值，以获得进一步使用的平均值。这需要尽可能动态，而不是在我提交此表单之后

您可以看到我使用onchange，它已经在一个函数中使用，用于显示每个滑块的输入值

希望有人能帮我

JavaScript:

window.onload=function（）{
var elements=document.querySelectorAll（'input[type=range]'））
对于（var i=0；i对于（var i=0；i也许你正试图实现这样的目标

(function (win, doc, undefined) {
    "use strict";

    var myForm = doc.getElementById("myForm"),
        sliders = myForm.getElementsByClassName("slider"),
        marks = myForm.getElementsByClassName("mark");

    myForm.addEventListener("change", changeHandler);

    function changeHandler(e) {
        var t = e.target,
            i = -1,
            sum = 0,
            avg = 0;

        if (t.nodeName.toLowerCase() === "input" && t.type.toLowerCase() === "range") {
            i = [].indexOf.call(sliders, t);
            marks[i].innerHTML = t.value;

            [].forEach.call(sliders, function (val) {
                sum += parseFloat(val.value);
            });

            avg = parseFloat((sum / sliders.length).toFixed(1));
        }
        console.log(avg);
    }
}(window, window.document));

查看我的控制台日志中的
，它只给出了NaN。并且没有更改任何值。不知道为什么…@user2971991:用您的js代码更新我的JSFIDLE，并在此处发布您还没有JSFIDLE，因此我无法修改it@user2971991：然后创建一个，JSFIDLE已关闭，因此…我只想从可见滑块获得平均值（滑块可以在将来打开/关闭）在我当前的表单中，我已经能够在每个滑块旁边显示每个滑块的值。我想将这些值合并为一个值，然后除以我使用的滑块数。我需要该最终值以供进一步使用。希望我现在能说得更清楚。
window.onload = function(){
   var elements=document.querySelectorAll('input[type=range]')
   for(var i = 0; i < elements.length; i++){ 
      elements[i].addEventListener('change',calcul , false);
   }
}

function calcul(){
  var elements = document.querySelectorAll('input[type="range"]')
  var len = 0
  var buf = 0
  for(var i=0;i<elements.length;i++) {
    if(elements[i].parentNode.parentNode.style.display != 'none'){
      buf += parseInt(elements[i].value)
      len++
    }
  }
  buf = len === 0 ? 0 : buf/len
  console.log(buf)
}

(function (win, doc, undefined) {
    "use strict";

    var myForm = doc.getElementById("myForm"),
        sliders = myForm.getElementsByClassName("slider"),
        marks = myForm.getElementsByClassName("mark");

    myForm.addEventListener("change", changeHandler);

    function changeHandler(e) {
        var t = e.target,
            i = -1,
            sum = 0,
            avg = 0;

        if (t.nodeName.toLowerCase() === "input" && t.type.toLowerCase() === "range") {
            i = [].indexOf.call(sliders, t);
            marks[i].innerHTML = t.value;

            [].forEach.call(sliders, function (val) {
                sum += parseFloat(val.value);
            });

            avg = parseFloat((sum / sliders.length).toFixed(1));
        }
        console.log(avg);
    }
}(window, window.document));