时间戳

首页 > 解决方案 > 如何在表单中进行 6 个范围输入

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

问题描述

您好，我想启用 6 个范围输入，但是当我这样做时，只有一个有效，而 5 个无效让我们试试

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>

我现在想让所有的值都与值一起工作我怎样才能使它与他的值一起工作

标签： javascriptformsinputrange

解决方案

您必须为其他范围滑块实现句柄功能......每个范围滑块必须有自己的“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>

推荐阅读