增加浮点数 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++;新值+=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);

这里有一个解决方案：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;
}