增加一个浮点数HTML / JavaScript

Question

我正在使用这些函数将滑块变量递增/递减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 ++; 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返回一个String，newValue ++运算符在内部解析一个数字，但+ =是一个字符串的有效运算符，因为你可以与它进行连接（因此被视为一个String）：

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

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

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

这是解决方案的小提琴：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;
}