Question

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

但是，当我尝试使用框中的值进行加法运算时，它将返回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>

Answer 1

我有几点评论希望对您有所帮助。获得NaN的原因有两个。

您没有uno / dos的初始值，因此都未定义开始。

在Java语言中：

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，一些样式点：

您可以将自闭标签用作输入标签。
您有一个应关闭的浮动标签（）

回复：onchange / oninput浏览器支持：

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

使用输入到程序化范围滑块的值

1 个答案: