Javascript 如何组合HTML5范围滑块值？

有没有一种方法可以将多个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>

函数百分比测试（）{
//获取输入字段的值
a=document.getElementById（“cuts”）.value；
b=document.getElementById（“burns”）.value；
c=document.getElementById（“感染”）.value；
d=document.getElementById（“皮炎”）.值；
e=document.getElementById（“穿刺”）.value；
f=document.getElementById（“扭伤”）.value；
g=document.getElementById（“impact”）.value；
VarX=（a+b+c+d+e+f+g）；
//分组做数学题
如果（x！=100）{
text=“总百分比必须等于100%”；
} 
document.getElementById（“rec_”）.innerHTML=text；
}

您可以做类似的事情（只需将其变得美观并根据您的需要进行调整）：

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>

---

你可以做这样的事情（只是让它变得漂亮，并根据你的需要进行调整）：

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>

---

@戴夫·戈麦斯的回答更加优雅，请改用它。但如果您想知道为什么它不起作用：

您的

document.getElementById（“cuts”）.value返回字符串。在添加它们之前，需要将它们转换为int。可以这样做：

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

@戴夫·戈麦斯的回答更加优雅，请改用它。但如果您想知道为什么它不起作用：

您的
document.getElementById（“cuts”）.value返回字符串。在添加它们之前，需要将它们转换为int。可以这样做：

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

将if更改为x！=100很好-我忘了我在测试是否需要更改那里的语法。但是
x=100
无效。请将if更改为x！=100很好-我忘了我在测试是否需要更改那里的语法。但是
x=100
不起作用这是一个非常有效和真实的答案——我完全忽略和忘记了这个答案。谢谢你这是一个非常有效和真实的答案-一个我完全忽略和忘记了。非常感谢。