Increment eine Gleitkommazahl HTML/JavaScript

Question

ich diese Funktionen bin mit/Dekrement Schieber Variable durch 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; 
 
}

zu erhöhen, aber wenn ich ersetzen newValue ++; mit newValue + = 0.5; Ich sehe nicht definiertes Verhalten, wenn RANGE2 Updates:

als ob es wie ein String behandelt wird.

Ich bin nicht mit HTML erfahren ... hier ist die Schaltfläche 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

Dies geschieht, weil innerHTML- wird Ihnen einen String zurückkehrt, die newValue ++ Operator intern Parsen zu eine Zahl, aber das + = ist ein gültiger Operator für eine Zeichenkette, da Sie Verkettungen damit machen können (wird daher als String behandelt):

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

Sie müssen nur den Wert als Fließkommazahl (mit parseFloat), bevor er die Manipulation analysieren, so dass es stattdessen als Nummer behandelt wird:

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

hier ist eine Geige mit der Lösung: link

Hier die aktualisierte Funktion

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; 
 
}