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

【问题标题】：How to get range input value on input box?如何在输入框上获取范围输入值？
【发布时间】：2019-09-12 06:21:56
【问题描述】：

我正在使用 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>

需要在输入框中显示的值

【问题讨论】：

您的代码中没有“输入框”。有一个span，它确实显示了值。你有什么具体问题？
stackoverflow.com/questions/10004723/… 这个问题能回答你的问题吗？
这与您使用 span 的方式相同。唯一的区别是你必须使用value 而不是innerHTML
你指的是哪个输入框？
<span> 没有匹配的关闭<span> ?

标签： javascript html css twitter-bootstrap

【解决方案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>

【讨论】：

仍然找不到解决方案，请在代码笔上查看我的代码 -> codepen.io/ajitstark/pen/jONKeej?editors=1010#0
请运行上面的代码。我已经更新了它。如果您仍然遇到问题，请告诉我。 @teenagevampire

【解决方案2】：

请按此更新代码

    <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>

【讨论】：

仍然找不到解决方案，请在代码笔上查看我的代码 -> codepen.io/ajitstark/pen/jONKeej?editors=1010#0
我已更新代码，请再次尝试更新代码。这将解决你的问题。如果还有问题请告诉我谢谢:)
工作正常。我刚刚更新了两位小数。谢谢你

【解决方案3】：

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

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

a) 在window.onload 事件上（所以转换和显示在页面加载时完成）；
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>

【讨论】：