使用编程范围滑块的值输入答案

【问题标题】：Using the value input to a programmatic range slider使用编程范围滑块的值输入
【发布时间】：2018-08-26 14:44:11
【问题描述】：

我制作了这两个程序化范围滑块，用户可以通过滑动条来选择值或在框中输入数字。（我确信有更有效的方法，但我只是在学习）

但是，当我尝试使用框中的值进行添加时，它会返回 NAN。我认为这仅仅是因为它使用了字符串值，但即使使用 parseFloat 函数也无法正确显示。

我应该如何在“函数（厚度A/B）”之外引用这些变量，以便在数学运算中使用它们？

谢谢。

<html>
  <body>
        <h3> Thickness A</h3>
          <p> Please select value using the slider bar or type in the text box.</p>
          <input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1"
              oninput="thicknessA(this.value)"
              onchange="thicknessA(this.value)">
          </input>
          <br>
          <p> Thickness A is:
          <input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1"
              oninput="thicknessA(this.value)"
              onchange="thicknessA(this.value)">
         </input>
              <span>mm</span></p>

        <h3> Thickness B</h3>
          <p> Please select value using the slider bar or type in the text box.</p>
          <input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1"
            oninput="thicknessB(this.value)"
            onchange="thicknessB(this.value)">
          <br>
          <p>Thickness B is:
          <input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1"
          oninput="thicknessB(this.value)"
          onchange="thicknessB(this.value)"> </input>
          <span>mm</span></p>

          <h4>Your total is: <span id="total"></span>

        <script>
        var uno;
        var dos;
        var addition;

        function thicknessA(newthicknessA)
            {
            document.getElementById('thicknessARange').value = newthicknessA;
            document.getElementById('thicknessANumber').value = newthicknessA;
            uno = document.getElementById('thicknessANumber').value;
            }
        function thicknessB(newthicknessB)
            {
            document.getElementById('thicknessBRange').value = newthicknessB;
            document.getElementById('thicknessBNumber').value = newthicknessB;
            dos = document.getElementById('thicknessBNumber').value;
            }

         addition = parseFloat(uno) + parseFloat(dos) ;
         document.getElementById("total").innerHTML= addition;

         </script></body></html>

【问题讨论】：

同时使用“oninput”和“onchange”事件来支持不同的浏览器是正确的还是没有必要的？

标签： javascript jquery html input range

【解决方案1】：

我有几个 cmets 希望能帮到你。你得到 NaN 的原因有两个。

uno/dos 没有初始值，因此它们都未定义。

在 Javascript 中：

parseFloat(undefined) = NaN（不是数字）

您永远不会在每次值更改后重置加法值，因此addition 始终保持NaN。

您可以尝试这样的方式来说明这些要点：

```

<h3> Thickness A</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)"></input>
<br>
<p> Thickness A is:
  <input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)">
  <span>mm</span></p>

<h3> Thickness B</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
<br>
<p>Thickness B is:
  <input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
  <span>mm</span></p>

<h4>Your total is: <span id="total"></span></h4>

<script>
var uno = 0;
var dos = 0;
var addition;

function thicknessA(newthicknessA) {
  document.getElementById('thicknessARange').value = newthicknessA;
  document.getElementById('thicknessANumber').value = newthicknessA;
  uno = document.getElementById('thicknessANumber').value;
  calculateTotal();
}

function thicknessB(newthicknessB) {
  document.getElementById('thicknessBRange').value = newthicknessB;
  document.getElementById('thicknessBNumber').value = newthicknessB;
  dos = document.getElementById('thicknessBNumber').value;
  calculateTotal();
}

function calculateTotal() {
  addition = (parseFloat(uno) + parseFloat(dos));
  document.getElementById("total").innerHTML = addition;
}

calculateTotal();
</script>

```

对于你的html，一些样式点：

您可以为输入标签使用自闭合标签。
您有一个应该关闭的浮动标签 ()

Re：onchange/oninput 浏览器支持：

看起来 IE 的 onInput 可能有一些问题：https://caniuse.com/#search=range
您可能需要查看人们专门讨论处理程序的其他线程（例如：onchange event on input type=range is not triggering in firefox while dragging），但请务必查看回复中的日期，以防信息过时。

【讨论】：