上/下ボタンでHTML5スライダーを更新します

Question

私はHTMLを初めて使用しています。ボタンの押下に基づいてスライダーを更新したいと思います。つまり、「UP」または「Down」を選択するたびに、スライダは「range2」の値の変化を横切って移動します。

スライダをボタンと組み合わせて、より正確にスライダおよび/以上ひどくボタンが付い：

ここ

私はスライダーやボタンを構築する方法である：

\t \t \t \t <div id="mainThermostat"> 
 
\t \t \t \t 
 
\t \t \t \t \t <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="tstatRange" type="range" style="width: 200px; height 40px" min="72.0" max="86.0" value="76" step = "0.5" list="increments" oninput="showMainTstatValue(this.value)" onchange="showMainTstatValue(this.value)"> 
 
\t \t \t \t \t \t <datalist id="increments"> 
 
\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" 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> 
 

 
\t \t \t \t 
 
\t \t \t \t </div>

、ここでは私の関数です：

function showMainTstatValue(newValue) 
 
{ 
 
    \t document.getElementById("range2").innerHTML = newValue; 
 
} 
 

 
function tstatUP() 
 
{ 
 
\t var newValue = document.getElementById("range2").innerHTML; 
 
\t newValue++; 
 
\t if(newValue > 86) newValue = 86; 
 
\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("range2").innerHTML = newValue; 
 
} 
 

 
function sendMainTstatValue() 
 
{ 
 
\t var newValue = document.getElementById("range2").innerHTML; 
 
\t var request = new XMLHttpRequest(); 
 
\t var url = 'http://10.0.1.25:3480/data_request?id=action&output_format=xml&DeviceNum=3&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Cool&action=SetCurrentSetpoint&NewCurrentSetpoint='+newValue; 
 
\t request.open('GET', url); 
 
\t request.send(); 
 
}

Answer 1

あなたのスライダーは、ボタンが入力した値を更新されていません。しようと、ラベルの（「範囲2」）のinnerHTMLを設定するが、あなたのtstatUP（の実際のスライダの（「tstatRange」）の値を設定することを忘れないでください）とtstatDN（）関数だけでなく、：

document.getElementById("tstatRange").value = newValue;