如何在表单中进行 6 个范围输入

Question

你好，我想启用 6 范围输入，但是当我这样做时 一个只工作，五个不工作 让我们试试

var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

                     	  <input name="act" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange">
  <p> Activities: <span id="demo"></span>%</p>




		                                    	  <input name="his" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="price">
  <p>History: <span id="result"></span>%</p>



		                                    	  <input name="nig" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange2">
  <p>Nightlife: <span id="demo2"></span>%</p>


	  <input name="beat" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange3">
  <p>Beaches: <span id="demo3"></span>%</p>
  
  
  	  <input name="natu" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange4">
  <p>Nature: <span id="demo4"></span>%</p>
  
  	  <input name="shop" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange5">
  <p>Shopping: <span id="demo5"></span>%</p>

我想让所有工作都使用值 现在我怎样才能让它用他的价值来处理每一个输入

Answer 1

您只为其中一个输入添加了事件处理程序，因此其他输入将不起作用。您可以使用查询选择器获取所有输入（所有输入都有 slider 类，因此我们可以使用 document.querySelector('input.slider')）并使用 for 循环遍历它们并获取 span 以显示与nextElementSibling 的百分比。

                     	  <input name="act" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange">
  <p> Activities: <span id="demo" class="slider"></span>%</p>




		                                    	  <input name="his" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="price">
  <p>History: <span id="result" class="slider"></span>%</p>



		                                    	  <input name="nig" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange2">
  <p>Nightlife: <span id="demo2" class="slider"></span>%</p>


	  <input name="beat" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange3">
  <p>Beaches: <span id="demo3" class="slider"></span>%</p>
  
  
  	  <input name="natu" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange4">
  <p>Nature: <span id="demo4" class="slider"></span>%</p>
  
  	  <input name="shop" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange5">
  <p>Shopping: <span id="demo5" class="slider"></span>%</p>
  <script>
 var sliders = document.querySelectorAll("input.slider");



for(let i = 0; i < sliders.length; i++){
var slider = sliders[i];
slider.nextElementSibling.querySelector('span.slider').innerHTML = slider.value;

  slider.oninput = function() {
   this.nextElementSibling.querySelector('span.slider').innerHTML = this.value;
  }
}
  </script>

Answer 2

您必须为其他范围滑块实现句柄功能... 每个范围滑块必须有自己的“oninput”功能，例如对于滑块历史：

var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

// You miss implementing the code for the 5 other ranges
// You must implement the "oninput" for each range slider
var slider2 = document.getElementById("price");

var output2 = document.getElementById("result");

output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}

                     	  <input name="act" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange">
  <p> Activities: <span id="demo"></span>%</p>




		                                    	  <input name="his" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="price">
  <p>History: <span id="result"></span>%</p>



		                                    	  <input name="nig" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange2">
  <p>Nightlife: <span id="demo2"></span>%</p>


	  <input name="beat" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange3">
  <p>Beaches: <span id="demo3"></span>%</p>
  
  
  	  <input name="natu" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange4">
  <p>Nature: <span id="demo4"></span>%</p>
  
  	  <input name="shop" style="    width: 70%;
    float: right;" type="range" min="0" max="100" value="0" class="slider" id="myRange5">
  <p>Shopping: <span id="demo5"></span>%</p>