如何在输入框上获取范围输入值？

Question

我正在使用 js 从范围滑块中获取值。现在我想在输入框中显示它。var slider = document.getElementById("myRange");var output = document.getElementById("demo");output.innerHTML = slider.value;slider.oninput = function() {  output.innerHTML = this.value;} <input type="range" min="1" max="10"  name="ans" class="slider" id="myRange"> value:<p><span id="demo"></p> 需要在输入框中显示值

Answer 1

你只需要一些小的改变。

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

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

var inputItem = document.getElementById("outputPounds");

output.innerHTML = slider.value;

weightConverter(slider.value);

slider.oninput = function() {

  output.innerHTML = this.value;

  weightConverter(slider.value);

}

function weightConverter(valNum) {

  inputItem.value=valNum*2.2046;

}

<input type="range" min="1" max="200" name="ans" class="slider" 

 id="myRange">

 <p class="agecls">Weight:<span id="demo" style="text-decoration:underline" 

 oninput="weightConverter(this.value)" 

 onchange="weightConverter(this.value)"></span></p>

 <p>Pounds: <input type="text" value="0" id="outputPounds"></p>

Answer 2

您的整个代码可以简化为一个函数，该函数读取输入值并更新要以公制或英制系统显示值的两个位置中的每一个。

将所有内容放在一个函数中使您可以将此函数的执行绑定到两个事件：

a) on window.onloadevent（因此在页面加载时完成转换和显示）；

b)在input.oninput事件上，所以当你滑动时它们也完成了。请注意，change事件仅在您释放滑块时input触发，而在检测到滑块值输入时触发事件，而与输入方法（键盘、鼠标、触摸等）无关。

工作示例：

const updateValues = function() {

  let inputValue = document.querySelector('#myRange').value;

  document.querySelector('#outputKg').innerHTML = inputValue;

  document.querySelector('#outputLbs').innerHTML = Math.round(inputValue * 220.462262) / 100;

}

window.onload = updateValues;

document.querySelector('#myRange').oninput = updateValues;

<input type="range" min="1" max="200" name="ans" class="slider" id="myRange">

<p>Weight: <span id="outputKg"></span></p>

<p>Pounds: <span id="outputLbs"></span></p>

Answer 3

请通过此更新代码

    <input type="range" min="1" max="200" name="ans" class="slider" id="myRange">

    <p class="agecls">Weight:<span id="demo" style="text-decoration:underline"></span></p>

    <p>Pounds: <span id="outputPounds"></span></p>

    <script type="text/javascript">

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

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

    output.innerHTML = slider.value;

    weightConverter(slider.value)

    slider.oninput = function() {

      output.innerHTML = this.value;

      weightConverter(this.value)

    }

    function weightConverter(valNum) {

      document.getElementById("outputPounds").innerHTML=valNum*2.2046;

    }

    </script>