Javascript 显示HTML5滑块值旁边的百分比

我有6个滑块，每个滑块的值都在0-100之间。我希望能够在每个滑块的右侧显示每个滑块的百分比（相对于滑块总数），但我不确定如何做到这一点

我能够抓取上面显示的滑块值，以及作为JavaScript变量的滑块值和值的总和，但是我不能

1） 在滑块移动时更新百分比值（我想我可能需要编写一个单独的函数来完成此操作，然后在滑块值显示后立即调用它？）

2） 将百分比值（我有效地四舍五入为整数）显示在滑块值所在位置的右侧

谁能告诉我怎么做？从技术角度来看，这应该不难，但我在这方面的经验很少。我也没有使用jquery（正如您所说的）。。。谢谢

代码：

第一重量
40
/百分比%
函数get_nextsibling（n）{
x=n.nextSibling；
while（x.nodeType！=1）{
x=x.nextSibling；}
返回x；}
函数showValue（self）{
get_nextsibling（self）.innerHTML=self.value；}
第二重量
10
/百分比%
第三重
20
/百分比%
第四重量
5.
/百分比%
第五重
5.
/百分比%
第六重
20
/百分比%
var weightfactor1=parseInt（document.getElementById（“weight1”）.value）；
var weightfactor2=parseInt（document.getElementById（“weight2”）.value）；
var weightfactor3=parseInt（document.getElementById（“weight3”）.value）；
var weightfactor4=parseInt（document.getElementById（“weight4”）.value）；
var weightfactor5=parseInt（document.getElementById（“weight5”）.value）；
var weightfactor6=parseInt（document.getElementById（“weight6”）.value）；
var权重系数总和=权重系数1+权重系数2+权重系数3+权重系数4+权重系数5+权重系数6；
document.getElementById（'val_weight1'）。innerHTML=（weightfactor1/weight_factor_sum）*100；
document.getElementById（'val_weight2'）。innerHTML=（weightfactor2/weight_factor_sum）*100；
document.getElementById（'val_weight3'）。innerHTML=（weightfactor3/weight_factor_sum）*100；
document.getElementById（'val_weight4'）。innerHTML=（weightfactor4/weight_factor_sum）*100；
document.getElementById（'val_weight5'）。innerHTML=（weightfactor5/weight_factor_sum）*100；
document.getElementById（'val_weight6'）。innerHTML=（weightfactor6/weight_factor_sum）*100；

尝试将此作为起点：

document.querySelector("#range").addEventListener("change", function(e){
    document.querySelector(".range").textContent=e.currentTarget.value;
})

这是可以玩的游戏

在处理多个滑块时，为每个滑块添加

更改

事件没有意义，而是使用

事件委派

（将

更改

-侦听器附加到包含所有滑块的父元素，并自行分派事件）

这里是一个处理更多滑块的和字段

document.querySelector("#range").addEventListener("change", function(e){
    document.querySelector(".range").textContent=e.currentTarget.value;
})