Question

我正在尝试创建一个包含4个范围滑块的文档，每个滑块都链接到各自的单独输入文本框。我的目标是将滑块和输入框链接在一起，以便它们的值彼此匹配。

由于有4组滑块/框，我尝试使用for循环（将来可能会添加更多），但是遇到一个问题，无论您更改哪4个，始终更新最后一个集合，而不是您尝试更改的集合。当我将它从for循环中分解出来并分别命名变量时，它似乎可以正常工作。是什么导致这种错误发生？

https://jsfiddle.net/noingwhat/Lox47ezk/

<body>
<div class="slidecontainer">
  Time
  <br>
  <input type="range" min="1" max="60" class="slider" id="TimeRange">
  <br>
  <input type="number" id="TimeNum">
  <br><br><br>
  Start Speed
  <br>
  <input type="range" min="1" max="10" class="slider" id="StartRange">
  <br>
  <input type="number" id="StartNum">
  <br><br><br>
  End Speed
  <br>
  <input type="range" min="1" max="5" class="slider" id="EndRange">
  <br>
  <input type="number" id="EndNum">
  <br><br><br>
  Brightness
  <br>
  <input type="range" min="1" max="100" class="slider" id="BrightRange">
  <br>
  <input type="number" id="BrightNum">
  <br>
  </div>

</body>

<script>
var Time = 15;
var Start = 5;
var End = 2;
var Brightness = 100;

var VarNames = ["Time", "Start", "End", "Bright"];
var VarValues = [Time, Start, End, Brightness];

for (var x in VarNames) {
    var slider = document.getElementById(VarNames[x] + "Range");
    var numbox = document.getElementById(VarNames[x] + "Num");
    slider.value = VarValues[x];
    numbox.value = slider.value;

    //alert("Attaching to: " + slider.id);
    slider.oninput = function() {
        //alert("You changed: " + slider.id);
        numbox.value = this.value;
    }
    numbox.oninput = function() {
        //alert("You change: " + numbox.id);
        slider.value = this.value;
    }
}

</script>

Javascript“ oninput”未附加到正确的元素

0 个答案: