Question

我正在创建一个带有滑块的表格以作答。我需要向用户显示他们当前的选择。我的问题是，这仅适用于最后一个问题，因此代码可以正常运行，但没有任何扩展空间。

尝试下面的滑块，请注意，只有其中一个显示<span>值，其余则不显示。

<input type="range" min="1" max="10" value="0" class="slider" id="question1">
<span id="question1score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question2">
<span id="question2score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question3">
<span id="question3score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question4">
<span id="question4score"></span>

<script>
var slider = document.getElementById("question1");
var output = document.getElementById("question1score");
var slider = document.getElementById("question2");
var output = document.getElementById("question2score");
var slider = document.getElementById("question3");
var output = document.getElementById("question3score");
var slider = document.getElementById("question4");
var output = document.getElementById("question4score");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

任何使所有这些正常工作的技巧将不胜感激。

Answer 1

按类名获取所有滑块，并向其添加事件侦听器。

更改滑块后，将值显示到相关的span。

var sliders = document.getElementsByClassName("slider");

for(var i=0; i<(sliders.length); i++) {
  sliders[i].addEventListener('input', function() {
    document.getElementById(this.getAttribute('id')+'score').innerText = this.value;
  });
}

<input type="range" min="1" max="10" value="0" class="slider" id="question1">
<span id="question1score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question2">
<span id="question2score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question3">
<span id="question3score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question4">
<span id="question4score"></span>

向用户显示多个滑块值

1 个答案: