javascript - 获取多个输入字段的平均值(范围)

Question

我几天来一直在寻找解决方案，我是 javascript 的初学者。

这是我用来通过 slider 输入值的形式。

                    <div class="formSliderField" style="display:block">
                        <div class="formIcons" id="formSliderImage1"></div>
                        <div class="formSlider"  id="formSlider1">
                            <input class="slider" name="cat_pk" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field1(this.value)"/>
                        </div>
                        <div class="formMark"><p id="formMark1" class="mark">1</p></div>
                    </div>

                    <div class="formSliderField" style="display:block">
                        <div class="formIcons" id="formSliderImage2"></div>
                        <div class="formSlider" id="formSlider2">
                            <input class="slider" name="cat_service" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field2(this.value)"/>
                        </div>
                        <div class="formMark"><p id="formMark2" class="mark">1</p></div>
                    </div>

                    <div class="formSliderField" style="display:block">
                        <div class="formIcons" id="formSliderImage3"></div>
                        <div class="formSlider" id="formSlider3">
                            <input class="slider" name="cat_prijs" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field3(this.value)"/>
                        </div>
                        <div class="formMark"><p id="formMark3" class="mark">1</p></div>
                    </div>

                    <div class="formSubmitWrapper">
                        <div id="formSubmitButton">
                        <input id="formRecensieSubmit" type="submit" value="Bevestigen"/>
                        </div>
                    </div>

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

您可以看到我使用了 onchange，这已经在函数中使用来显示每个 slider 的输入值。

希望有人能帮助我解决这个问题。

Answer 1

JavaScript:

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)
}

CodeOpen