Increment a floating point number HTML/JavaScript - html

Question

I'm using these functions to increment/decrement slider variable by 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;
}
but if I replace newValue++; with newValue+=0.5; I see undefined behavior when range2 updates:
as if it is being treated like a String.
I'm not experienced with HTML... here is the button 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>°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

This happens because innerHTML is returning you a String, the newValue++ operator is parsing internally to a number but the += is a valid operator on a string since you can make concatenations with it (therefore is being treated as a String):
var x = "foo"
x += "bar"; //This shoud be "foobar"
You just need to parse the value as a float number (using parseFloat) before manipulating it so it's treated as a number instead:
var newValue = parseFloat(document.getElementById("range2").innerHTML);
here is a fiddle with the solution: link
Here is the updated function
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;
}