递增一个浮点数HTML/JavaScript的

Question

我使用这些函数来增加/减少滑块变量由1

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

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

但如果我更换NEWVALUE ++;用newValue + = 0.5;我看到未定义行为RANGE2更新时：

，如果它被视为一个字符串。

我不跟HTML经历过......这里是按钮HTML：

<div id="tstatSlider"> 
 
\t \t \t \t 
 
\t \t \t \t \t \t <h2>Thermostat Setting</h2> 
 
\t \t \t \t \t \t <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)"> 
 
\t \t \t \t \t \t <datalist id="increments2"> 
 
\t \t \t \t \t \t \t <option>72</option> 
 
\t \t \t \t \t \t \t <option>74</option> 
 
\t \t \t \t \t \t \t <option>76</option> 
 
\t \t \t \t \t \t \t <option>78</option> 
 
\t \t \t \t \t \t \t <option>80</option> 
 
\t \t \t \t \t \t \t <option>82</option> 
 
\t \t \t \t \t \t \t <option>84</option> 
 
\t \t \t \t \t \t \t <option>86</option> 
 
\t \t \t \t \t \t </datalist> 
 
\t \t \t \t \t \t <span id="range2">76.0</span>&deg;F 
 
\t \t \t \t \t \t <br/> <br/> 
 
\t \t \t \t \t \t <input type="button" class="button" onclick="sendMainTstatValue()" value = SUBMIT /> 
 
\t \t \t \t \t \t <br /><br /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div id="tstatButtons"> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <input type="button" class="button" value="UP" onclick="tstatUP()"> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <input type="button" class="button" value="DOWN" onclick="tstatDN()"> 
 
\t \t \t \t \t </div>

Answer 1

这是因为innerHTML的是你返回一个字符串，该NEWVALUE ++运算符内部解析到一个数字，但+ =是字符串上的有效运算符，因为您可以与它串联（因此被视为字符串）：

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

你只需要所以它的数量，而不是处理操纵它之前解析值（使用parseFloat）浮点数：

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

这里是解决一个小提琴：link

这里更新的功能

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

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