如何解决如何在 2 处显示滑块范围的值?
我想在slider range
和其他地方显示slider
的值,我尝试使用多种方式getElementById,getElementsByClassName[]
,getElementsByName[]
只适用于[0]
或 [1]
但不适用于 for loop
。
这是我的代码:
JavaScript:
var slider = document.getElementById("range");
var output = document.getElementsByName("value_cpu");
for(var i=0; i < output.lenght; i++){
output[i].innerHTML = slider.value;
slider.oninput = function() {
output[i].innerHTML = this.value;
}
}
HTML:
<div class="sliderValue">
<span class="kanade-sl" id="value_cpu" name="value_cpu"> </span>
</div>
<div class="progress" style="height: 25px;">
<input class="slider ip" id="range" type="range" style="width: 100%;" min="1" max="72" value="1">
<span class="progress-bar" role="progressbar" ></span>
</div>
解决方法
这是一个众所周知的循环闭包问题:slider.oninput
函数不会“复制”i
的值——相反,它保留对变量本身的引用。因此,如果在循环完成后调用 slider.oninput
,它将看到的 i
值为 output.length
。
为了绕过这个,您必须在函数外部的变量上复制 i
的值。此变量必须使用 let
而不是 var
声明(这可能不适用于 Internet Explorer 的旧版本),因此每次循环迭代都会创建一个新变量:
for(var i = 0; i < output.length; i++){
output[i].innerHTML = slider.value;
let my_i = i;
slider.oninput = function() {
output[my_i].innerHTML = this.value;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。