gpt4 book ai didi

javascript - 如何将 HTML5 范围 slider 值组合在一起?

转载 作者:行者123 更新时间:2023-11-28 18:19:17 25 4
gpt4 key购买 nike

有没有办法将多个 html5 slider 字段组合在一起。最初我尝试对 type=number 字段执行此操作,但我不喜欢它的外观。

所以我所拥有的是 7 个字段,我想使用 slider ,各个最小值为 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>

最佳答案

你可以做这样的事情(只是让它漂亮并适应你的需要):

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

关于javascript - 如何将 HTML5 范围 slider 值组合在一起?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40220659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com