Как объединить значения слайдера диапазона HTML5?

Question

Есть ли способ группировать несколько ползунков html5. Первоначально я пробовал делать это будет type=number полей, но мне не понравилось, как он выглядел.

Так что у меня то, что у меня есть 7 полей, которые я хочу использовать ползунки с отдельными минимальными значениями 0 и максимальными значениями 100 - однако - трюк в том, что мне нужен способ добавить их все, чтобы убедиться в всего они равны 100. Ни одно из полей не требуется. Имеет ли это смысл?

Вот функция, я пытался, но он не работает на всех:

<script> 
function percentageTest() { 

    // Get the value of the input fields 
    a = document.getElementById("cuts").value; 
    b = document.getElementById("burns").value; 
    c = document.getElementById("infection").value; 
    d = document.getElementById("dermatitis").value; 
    e = document.getElementById("puncture").value; 
    f = document.getElementById("sprain").value; 
    g = document.getElementById("impact").value; 

    var x = (a + b + c + d + e + f + g); 

    // grouping together and doing the math 
    if (x != 100) { 
     text = "The total percentage must equal 100%"; 
    } 
    document.getElementById("rec_injuries").innerHTML = text; 
} 
</script> 

Answer 1

Вы можете сделать что-то вроде этого (просто сделать это красиво и адаптировать его к вашим потребностям):

HTML

<form> 
    <formgroup class="ranges"> 
    <input type="range" min="0" max="100"> 
    <input type="range" min="0" max="100"> 
    <input type="range" min="0" max="100"> 
    <input type="range" min="0" max="100"> 
    </formgroup> 
</form> 

JavaScript

var ranges = Array.from(document.querySelector('.ranges').children); 

var total = ranges.reduce(function(acc, curr) { 
    return acc + Number(curr.value) 
}, 0) 

// Now you can check total 

Answer 2

ответы @Dave Gomez более элегантные, используйте вместо этого. Но если вам интересно, почему он не работает:

document.getElementById("cuts").value; Обратные строки. Перед их добавлением необходимо преобразовать их в int. Это можно сделать так:

a = +document.getElementById("cuts").value; 
b = +document.getElementById("burns").value; 
... etc