Question

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

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

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

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

你可以看到我使用onchange，这已经在一个函数中用来显示每个滑块的输入值。

希望有人可以帮助我。

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

Answer 2

也许你正在努力实现这样的目标？

(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));

查看Demonstration

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

2 个答案:

CodeOpen