增加一个浮点数 HTML/JavaScript

Question

我正在使用这些函数 increment/decrement 滑块变量 1。

function tstatUP()
{
 var newValue = document.getElementById("range2").innerHTML;
 newValue++;
 if(newValue > 86) newValue = 86;
 document.getElementById("tstatRange2").value = newValue;
 document.getElementById("range2").innerHTML = newValue;
}

function tstatDN()
{
    var newValue = document.getElementById("range2").innerHTML;
 newValue--;
 if(newValue < 72) newValue = 72;
 document.getElementById("tstatRange2").value = newValue;
 document.getElementById("range2").innerHTML = newValue;
}

但是如果我替换 newValue++；新值+=0.5；我在 range2 更新时看到未定义的行为：

就好像它被当作字符串一样对待。

我对 HTML 没有经验...这是按钮 HTML:

<div id="tstatSlider">
    
      <h2>Thermostat Setting</h2>
      <input id="tstatRange2" type="range" style="width: 200px; height 40px" min="72.0" max="86.0" value="76" step = "0.5" list="increments2" oninput="showMainTstatValue(this.value)" onchange="showMainTstatValue(this.value)">
      <datalist id="increments2">
       <option>72</option>
       <option>74</option>
       <option>76</option>
       <option>78</option>
       <option>80</option>
       <option>82</option>
       <option>84</option>
       <option>86</option>
      </datalist>
      <span id="range2">76.0</span>&deg;F
      <br/> <br/>
      <input type="button" class="button" onclick="sendMainTstatValue()" value = SUBMIT />
      <br /><br />
     </div>
     
     <div id="tstatButtons">
      <br />
      <br />
      <input type="button" class="button" value="UP" onclick="tstatUP()">
      <br />
      <input type="button" class="button" value="DOWN" onclick="tstatDN()">
     </div>

Answer 1

发生这种情况是因为 innerHTML 向您返回一个字符串，newValue++ 运算符在内部解析为一个数字，但 += 是字符串的有效运算符，因为您可以使用它进行连接（因此被视为一个字符串):

var x = "foo" 
x += "bar"; //This shoud be "foobar"

您只需要在操作之前将该值解析为浮点数（使用 parseFloat），以便将其视为数字：

var newValue = parseFloat(document.getElementById("range2").innerHTML);

这里有一个 fiddle 的解决方案：link

这是更新后的函数

function tstatUP()
{
 var newValue = parseFloat(document.getElementById("range2").innerHTML);
 newValue+=0.5;
 if(newValue > 86) newValue = 86;
 document.getElementById("tstatRange2").value = newValue;
 document.getElementById("range2").innerHTML = newValue;
}

function tstatDN()
{
    var newValue = parseFloat(document.getElementById("range2").innerHTML);
 newValue-=0.5;
 if(newValue < 72) newValue = 72;
 document.getElementById("tstatRange2").value = newValue;
 document.getElementById("range2").innerHTML = newValue;
}

增加一个浮点数 HTML/JavaScript

Increment a floating point number HTML/JavaScript

html

floating-point

increment