Question

如何获取范围滑块以将输出存储为变量（然后将其设置为会话）

感谢您的帮助

*已删除<和>，因此可以显示为代码

下面是我的代码（不起作用）

HTML代码：

    input type="range" min="1" max="100" value="50" class="slider" id="range"
    Value: span id="value" /span
    Value: span id="outputVar" /span

JavaScript代码：

    var slider = document.getElementById("range");
    var output = document.getElementById("value");
    var outputVarNo = document.getElementById("outputVar");
    output.innerHTML = slider.value;

Answer 1

您的示例“有效”的地方确实显示了您所描述的范围值。它不会更新该值，因为您的JS代码在启动时只会执行一次。若要在更改范围输入时执行代码并更新输出，请使用事件侦听器：

  var slider = document.getElementById("range");
  var output = document.getElementById("value");
  var outputVarNo = document.getElementById("outputVar");

  let update = () => output.innerHTML = slider.value;

  slider.addEventListener('input', update);
  update();

<input type="range" min="1" max="100" value="50" class="slider" id="range">
Value: <span id="value"></span>
Value: <span id="outputVar"></span>

Answer 2

您可能想将onChange事件添加到滑块。

var slider = document.getElementById("range");
slider.onchange = function(event){
  var output = document.getElementById("outputVar");
  output.innerHTML = slider.value;
}

@junvar提供的答案更适合实时更新。另外，与直接使用oninput相比，addEventListener是更好的IMO

如何获取滑块范围值并将其存储在JavaScript中的变量中

2 个答案: